JQuery — Как автоматически заново подписаться на событие после Ajax?

Question

[wartur]

Здравствуйте уважаемые профессионалы JS + jQuery.



Представим гипотетическую ситуацию, есть некий динамически cгенерированный код html.

<div id="reload_it"><br>
  <button id="btn">Да будет Ajax</button><br>
<div><br>

Допустим, что этот код символизирует Ajax и все процессы с ним связанные.

$('#btn').click(function(){<br>
  var dataBtn = '<button id="btn">Да будет Ajax</button>';<br>
  $('#reload_it').empty().append(dataBtn);<br>
  // тут btn уже не кликается!<br>
});<br>

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

function btn_rebinder(){<br>
  $('#btn'),unbind();<br>
  $('#btn').click(function(){<br>
    var dataBtn = '<button id="btn">Да будет Ajax</button>';<br>
    $('#reload_it').empty().append(dataBtn);<br>
    btn_rebinder();<br>
    // тут btn кликается<br>
  });<br>
}<br>
btn_rebinder();<br>

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



Теперь хочется вырасти из пеленок, поэтому вопрос

Как решить данную задачу академически правильно? Если это не возможно, то какие существуют готовые движки, которые закрывают данные проблемы?



Благодарю за внимание



PS: если есть некоторые синтаксические ошибки, то не бейте. Писал плейнтекстом, хотел донести только смысл вопроса «ребиндинга».

Answer 1

[AlexKR]

попробуйте использовать on
$('#reload_it').on('click', '#btn', function(event){alert(1);});

Comments

[wartur]

Если других вариантов нет, то считаем это за лучшее решение. Спасибо!

[pxx]

Это и есть лучшее решение — делегировать событие неизменному родителю.

[wartur]

Так, я и вижу это =)

Answer 2

[Weageoo]

В старых версиях можно использовать live — выживает после AJAX. Но у него свои недостатки)

Answer 3

[La2ha]

Есть еще метод, который не рекомендую применять но он работает.
После выполнения ajax запроса, в конце success продублировать ваш код

$('#btn').click(function(){
  var dataBtn = '<button id="btn">Да будет Ajax</button>';
  $('#reload_it').empty().append(dataBtn);
  // тут btn уже не кликается!
});

Answer 4

[Jonh Doe]

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

Comments

[wartur]

Собственно эту туку я и сделал когда писал выше, при чем от конкретного controller/action о сам переключается на нужный блок биндов =). Но это конечно пеленки, то что было уже написано можно считать грамотным вариантом.

Answer 5

[wartur]

habrahabr.ru/qa/35917/#comment_172157

Comments

[Skpd]

Злая ссылка.