jQuery переустанавливает функции после вызова ajax

Question

У меня есть некоторые проблемы с .load:

Мой сайт использует эту строку кода для переключения кнопки:

$('.button').click(function(){
// my button function
});

Я написал небольшой вызов ajax для загрузки divбез перезагрузки, но действие кнопки не установлено:

$("#ajax-load").load('/ #content',function(){
    $('#ajax-load .button').click(function(){
    // my button function
    });
});

Это не работает, контент отображается правильно, но JS не работает в обновленном контенте.

Любые идеи?

Answer 1

Попробуйте вместо этого:

$('#ajax-load').on('click','.button',function(){
    // my button function
});

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

Answer 2

Если вы используете jQuery <1.7, используйте <a href="http://api.jquery.com/delegate/" rel="nofollow">.delegate(), в противном случае используйте .on().

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

Answer 3

Вы пытались использовать jQuery.live ?live свяжет действия со всеми существующими и будущими вхождениями вашего селектора.Так что если у вас есть:

$('.button').live('click', function(){ });

Это должно работать с существующими .button элементами и будущими.

Редактировать: в jQuery 1.7 вы должны использовать jQuery.on вместо live.