Question

我有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);
            }
        });
    });

});

第一种情况：

如果我更改daysOffer（当天），则通话有效。
然后，如果我更改时间表，则调用失败，就像未检测到更改事件一样。

第二种情况：

如果我更改时间表，则呼叫有效（检测到事件）
然后，如果我更改de daysOffer，则呼叫也会起作用（检测到事件）
如果我再次更改timetableOffers，则调用失败..但更改daysOffer仍然有效

发生了什么，我该怎么做才能解决问题？

谢谢！

Answer 1

狂野猜测，因为我看不到您的HTML：

您的#timeAndOffers元素是否同时包含#timetableOffers和offersByDay？

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

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

您有两种选择：

在$('#daysOffers').change的回调结束时重新附加事件监听器，或
使用jquery.on，即使在附加时不存在的DOM元素触发事件时，也会调用事件处理程序。

我认为最好的解决方案是第二个，需要你改变

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

到

$(document).on('change', '#timetableOffers', function(){

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

1 个答案: