Событие jQuery, пузырящееся с помощью AJAX

Question

Мне нелегко получить некоторые функции jQuery, чтобы работать так, как должно.

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

$('.like').toggle(
    function() { 
     console.log('href'); 
    }, function() { 
     console.log('rel'); 
    } 
); 

Мой друг направил меня к событию кипящий, но я с трудом получают его на работу.

Вот что у меня есть на данный момент.

простого HTML

​<button href='123.html' rel='456.html' class='like'>Click here</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

на JQuery, завернутый в $ (документ) .ready (... Я попытался функция переключения, и, кажется, как кнопки спит для первого нажмите, затем он внезапно просыпается и выполняет событие.

$('body').click(function(event) { 
    if ($(event.target).is('.like')) { 
     var $like = $(event.target); 
     $like.toggle(
      function() { 
       console.log('href'); 
      }, function() { 
       console.log('rel'); 
      } 
     ); 
    } 
});​ 

Что код должен быть, как для того, чтобы продолжать работать, когда новые элементы добавляются и сделать S что кнопка не действует таким образом

Вот скрипка.

http://jsfiddle.net/_entreprenerd/SpmbQ/

Answer 1

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

Раствор образца:

$("body").on("click", ".like", function() { 
    var $this = $(this); 
    var toggled= $this.data("toggled"); 
    if (toggled) { 
     console.log('rel'); 
    } else { 
     console.log('href'); 
    } 
    $this.data("toggled", !toggled); 
}); 

Я также предлагаю изменить селектор в приведенной выше коде от «тела» в родительский контейнер .like элементов, поэтому делегация более короткий путь вверх по дереву документа.

и образец скрипка: http://jsfiddle.net/t2pXr/3/

Answer 2

Вам необходимо делегировать обработчик событий для устранения неполадок.

$('body').on('click', '.like', function() { 
    $(this).toggle(
    function() { 
     console.log('href'); 
    }, function() { 
     console.log('rel'); 
    }); 
}).click(); 

См .on()

Вы также delegate()

$('body').delegate('.like', 'click', function() { 
    $(this).toggle(
    function() { 
     console.log('href'); 
    }, function() { 
     console.log('rel'); 
    }); 
}).click(); 

ПРИМЕЧАНИЕ Вместо того, чтобы тело, вы можете использовать контейнер, который держит .like.

Answer 3

Вы, вероятно, ищете .on() (или .delegate() для JQuery версии < 1,7)

Answer 4

либо раствора thecodeparadox или Hook события после того, добавлены новые элементы в DOM Аякса вызова. Но решение thecodeparadox лучше.