Как связать события после того, как 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()); 

To:

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

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

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

Answer 2

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

Answer 3

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

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

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

Update: С новыми версиями Jquery вы должны использовать on() вместо live().

Answer 4

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

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

Answer 5

С JQuery API:

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

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

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

Answer 6

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

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

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