Событие не запускается в jquery, что не так?

Question

У меня четыре элемента <select>.

<div id="select-countries-container">
        <select name="countryId" id="select-countries">
            <option value="">Choose Country &raquo;</option>
        <?php foreach($location->fetch(array('table' => 'countries')) as $country) { ?>
            <option value="<?php echo $country['id']; ?>"><?php echo $country['name']; ?></option>
        <?php } ?>
    </select>
</div>
<div id="select-states-container"><select disabled="disabled"><option value="">Choose State &raquo;</option></select></div>
<div id="select-cities-container"><select disabled="disabled"><option value="">Choose City &raquo;</option></select></div>
<div id="select-areas-container"><select disabled="disabled"><option value="">Choose Area &raquo;</option></select></div>

дочерний элемент <select> заменен кодом, полученным от Ajax, вот код Ajax, который я использую.

$('#select-countries').change(function(){
    var countryId = $(this).val();
    if(countryId == ''){
        $('#select-states-container').html(chooseState);
    } else {
        $.ajax({
            type: 'POST',
            url:  'process.php',
            data: 'countryId='+countryId,
            beforeSend: function() {
                $('#select-states-container').html(loadingText);
            },
            success: function(states){
                if(states == 'null') {
                    $('#select-states-container').html(emptyState);
                } else {
                    $('#select-states-container').html(states);
                }   
            }
        });
    }
});

и данные, извлекаемые из process.php, равны.

$select  = '<select name="stateId" id="select-states">';
$select .= '<option value = "">Choose State &raquo;</option>';
foreach($states as $state) {
    $select .= '<option value = "'.$state['id'].'">'.$state['name'].'</option>';
}
$select .= '</select>';
echo $select;

, пока здесь все не работает идеально, проблема начинается, когда я выбираю состояния из второго <select>, то есть <select name="stateId" id="select-states">, полученного из процесса.php, когда я выбираю значение из этого, оно не вызывает функцию, с которой оно связано, я не уверен, что происходит, вот что я пытался сделать.

$('#select-states').change(function(){
        alert('Fire');
});

, и это не срабатывает,что не так с моим кодом?

спасибо.

Answer 1

Вы должны использовать .live () .

Из документации:

Описание: прикрепить обработчик к событию для всех элементов, которые соответствовать текущему селектору, сейчас и в будущем.

Answer 2

Вам необходимо использовать delegate(), чтобы добавить обработчик изменений к динамически создаваемым элементам:

$("body").delegate("#select-states", "change", function(){
    ...

Это необходимо, потому что существующий код запускается только один раз (предположительно, когда документ загружен) и привязывает обработчик событий только к элементам, существующим в то время. Делегат свяжет событие со всеми существующими элементами, плюс со всеми элементами, которые будут созданы в будущем. Для получения дополнительной информации см. Документацию jQuery для делегатов .

Если вы хотите, вы можете использовать bind() вместо этого. Вы должны поместить вызов bind() в функцию успеха вызова AJAX, чтобы прикрепить обработчик события к элементу после его создания.

EDIT

Для хорошего анализа различий между delegate() и live() см. jQuery: live () vs Delegate ()