Как связать событие после успеха ajax в jQuery

Question

Так вот мой код:

$(document).ready( function() {
$('#form').bind('change', function(){
    $.ajax({
    type: 'get',
    url: 'api.php',
    data: 'task=getdirs&formname='+$('#form').attr('value'),
    dataType: "text",
    success: function (html){
        $('#chdir').html(html);
        $('#chdir select').bind('change', getDirs());
        }
    });
});
function getDirs(){
}})

#form здесь имеет элемент <select>. Вызов ajax возвращает кусок html с новым элементом <select>.
Работает хорошо: в #chdir div я получаю новый выпадающий элемент. Но событие внутри части success срабатывает только один раз. Тогда это событие больше не работает.
Что я могу сделать, чтобы вновь созданный элемент <select> работал так же, как и первый?

Answer 1

Вы вызываете функцию getDirs непосредственно при вызове метода bind, вы должны делать это, только если эта функция возвращает другую функцию, но я думаю, что это не так.

Изменение:

$('#chdir select').bind('change', getDirs());

Кому:

$('#chdir select').bind('change', getDirs);

Или, если вы используете jQuery 1.4+, вы можете связать событие change с методом live только один раз,и вам не нужно повторно связывать событие после этого:

$(document).ready(function () {
  $('#chdir select').live('change', getDirs);
});

Answer 2

Поскольку этот пост SO появился в моем поиске в Google, я подумал, что должен упомянуть, что с 1.9 устарел .live, и рекомендуемый метод теперь .on

http://api.jquery.com/on/

Answer 3

Если я правильно вас понимаю, проблема в том, что событие не работает с вашим динамически созданным элементом select.

Если так, решение простое ... попробуйте это:

$('#form').live('change', function()...

Обновление: В более новых версиях jQuery вы должны использовать on() вместо live().

Answer 4

Если вы используете jQuery 1.9+, для присоединения обработчиков событий следует использовать метод .on . Однако после добавления HTML к документу вам все равно придется прикреплять новые обработчики событий.

Чтобы написать небольшой кусочек простого, рабочего кода и обработать новые элементы, вы можете использовать .on в документе:

$(document).on('click', '.close-icon', function() { // selector as a parameter
    $(this).parent().fadeOut(500); // - example logic code
});

Answer 5

Из API jQuery:

Начиная с jQuery 1.7, метод .live () устарел. Используйте .on (), чтобы прикрепить обработчики событий. Пользователи более старых версий jQuery должны использовать .delegate () вместо .live ().

Поэтому вы должны использовать .delegate (), если вы работаете с версией jQuery, предшествующей 1.7.

http://api.jquery.com/live/

Answer 6

Вместо использования связывания, попробуйте использовать .live . Для этого вам понадобится последняя версия jQuery.