jQuery -在一个页面中加载两个脚本，其中一个在启动后失败

jQuery - Loading two script in one page, one failed after the other was launched

本文关键字：一个 启动 失败 脚本 jQuery 加载 两个      更新时间：2023-09-26

我有3个选择框:日期，时间表和报价。

如果我们改变日期选择值:时间表和优惠也会改变。

如果我们改变时间表:只有提供的选择会改变。

我有两个ajax调用为了做到这一点:

$(document).ready(function() {
    //If we change the day
    $('#daysOffers').change(function(){
        var selectedDate = $('#daysOffers option:selected').val();
        console.log(selectedDate);
        $.ajax({
            url:  '<?= Yii::app()->createUrl('place/orderOffersBySelectedDate') ?>',
            type: 'GET',
            data: 'placeId='+<?=$placeId ?>+'&cityId='+<?= $cityId ?>+'&selectedDate='+selectedDate+'',
            success: function(data) { 
                $('#timeAndOffers').empty();
                $('#timeAndOffers').append(data);
            }
        });
    });
    //If we change the timetable
    $('#timetableOffers').change(function(){
        console.log('Changing time');
        var selectedDate = $('#daysOffers option:selected').val();
        var start = $('#timetableOffers option:selected').data("timestart");
        var end = $('#timetableOffers option:selected').data("timeend");
        $.ajax({
            url:  '<?= Yii::app()->createUrl('place/orderOffersBySelectedDate') ?>',
            type: 'GET',
            data: 'placeId='+<?=$placeId ?>+'&cityId='+<?= $cityId ?>+'&selectedDate='+selectedDate+'&startTime='+start+'&endTime='+end+'',
            success: function(data) { 
                $('#offersByDay').empty();
                $('#offersByDay').append(data);
            }
        });
    });
});

第一个场景:

  • 如果我更改日期，通话正常
  • 然后，如果我更改timeableoffers调用失败，就像未检测到更改事件一样。

第二个场景:

  • 如果我改变时间表提供呼叫工作(事件检测)
  • 然后，如果我改变日期，呼叫也工作(事件检测)
  • 如果我再次更改timeableoffers，调用失败。但是改变day - soffer仍然有效

发生了什么事，我能做些什么来解决它?

谢谢!

胡乱猜测，因为我没有看到你的HTML:

您的#timeAndOffers是同时包含#timetableOffers和offersByDay的元素吗?

如果是这样，在$('#daysOffers').change的回调方法中，您将清空它并在其中重新添加data，从而重新创建#timetableOffers选择。

使用.change does附加到#timetableOffers的事件侦听器在更改新选择时不会触发，因为它所附加的DOM元素不再存在。

你有两个选择:

  • 在$('#daysOffers').change的回调结束时重新连接事件监听器，或者
  • 使用jquery.on，它将使事件处理程序被调用，即使事件是由绑定时不存在的DOM元素触发的。

我认为最好的解决方案是第二种，这需要你修改

$('#timetableOffers').change(function(){


$(document).on('change', '#timetableOffers', function(){
相关文章：