Обновить код jQuery после запроса AJAX - PullRequest
Новая
       5

Обновить код jQuery после запроса AJAX

4 голосов
/ 13 декабря 2011

Скажем, например, что у меня есть несколько кнопок, которые вызывают AJAX-запросы при нажатии. 

$(document).ready(function(){
    $('button').each( function() {
        $(this).click( function() {
                    alert('Clicked.');
            // ...AJAX request...
        });
    });
});

Когда я нажимаю на кнопку, все работает нормально.

Но если язагрузить кнопки с AJAX-запросом, а затем я нажимаю на них, приведенный выше код перестает работать.

Как мне избавиться от этого?

Я пробовал метод on() 

$(document).ready(function(){
    $('button').each( function() {
        $(this).on('click', function() {
                    alert('Clicked.');
            // ...AJAX request...
        });
    });
});

Но это то же самое.Работает нормально, не работает с содержимым, загруженным AJAX.

Я застрял, пожалуйста, помогите мне.

PS: я использую последнюю версию jQuery (v1.7.1).

Ответы [ 5 ]

8 голосов
/ 13 декабря 2011

Вы должны сделать: 

$(document).ready(function(){
       $('body').on('click','button', function() {
                    alert('Clicked.');
            // ...AJAX request...
        });
});

Таким образом, элемент body обрабатывает все события click в элементах <button> и работает, даже если они добавляются через AJAX.

Вместо использования тега <body> вы можете использовать что-то, что обернет эти <button> ... в любом случае, прочитайте документы jQuery для on () , это довольно просто.

P.S. если вам интересно, live() работает точно так же, как я использовал on(), jQuery просто перехватывает события, когда они всплывают в DOM

0 голосов
/ 13 декабря 2011

У меня есть предпочтение делегату в этом случае. 

$(document).ready(function(){ 
    $('body').delegate('button','click',function(){
       alert('Clicked.');
    });
});

Рабочий пример: http://jsfiddle.net/MarkSchultheiss/cKVGb/

небольшое обсуждение вопроса о делегате, live и bind: http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

И, наконец, документация .on (), так что вы также можете использовать это: http://api.jquery.com/on/

так что вы были почти правы! первые уже присутствующие кнопки: 

$(document).ready(function(){
    $('button').on('click', function() { 
      alert('Clicked.');
                     // ...AJAX request...
    });
});

теперь новые (и старые) 

$(document).ready(function(){
    $('body').on('click', 'button', function() { 
      alert('Clicked.');
                     // ...AJAX request...
    });
});
0 голосов
/ 13 декабря 2011

Вероятно, самый безопасный (и наименее подверженный ошибкам) ​​подход - это привязка событий щелчка ПОСЛЕ того, как вы загрузили кнопки с помощью AJAX.

0 голосов
/ 13 декабря 2011

try on. 

$(document).ready(function(){
        $('button').on('click', function() {
                    alert('Clicked.');
            // ...AJAX request...
    });
});

и одного цикла будет достаточно, нет необходимости в цикле each, поскольку сам цикл on обнаруживает все элементы button и инициирует событие нажатия.

0 голосов
/ 13 декабря 2011

Вы должны установить обработчики кликов после того, как кнопки уже находятся на странице. Если вы делаете это при загрузке страницы, то кнопки, загруженные ajax, еще не готовы принять назначение обработчика.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...