Q:

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

I have 3 select boxes : day, timetable and offers.
If we change day select value : timetable AND offers  will change too.
If we change timetable : only offers select will change.
I have two ajax calls in order to do that : 
$(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);
            }
        });
    });

});   

First scenario :

If I change daysOffer (the day) the call works.
Then, if I change timetableOffers the call failed, like the change event was not detected.

Second scenario :

If I change timetableOffers the call works (event detected)
Then if I change de daysOffer the call works too (event detected)
If i change timetableOffers again, the call failed.. But changing daysOffer still works

What's going on and what can I do to fix it ?
Thanks !

A:

Wild guess because i don't see your HTML:
Is your #timeAndOffers the element containing both #timetableOffers and offersByDay?
If so, in the callback method for $('#daysOffers').change you are emptying it and reappending data inside it, thus recreating the #timetableOffers select.
The event listener you appended to #timetableOffers with .change does will not fire when the new select is changed, since the DOM element it was attached to no longer exists.
You have two options then:

Reattach the event listener at the end of $('#daysOffers').change's callback, or
Use jquery.on, which will have the event handler be called even when the event is fired by DOM elements that are not present at the time of attaching.

I think the best solution is the second one, which will require you to change 
$('#timetableOffers').change(function(){

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

