Ответ 1
Когда вы удаляете элемент и затем заменяете его (через javascript), он теряет привязки событий, которые были добавлены к нему при загрузке страницы.
(Это также относится к содержимому, добавленному на страницу после загрузки страницы, то есть к загружаемому содержимому ajax)
Для этого существует несколько возможных решений.
1) Инкапсулируйте свой "привязывающий" код и вызовите его как при загрузке страницы, так и сразу после того, как элемент, о котором идет речь, будет добавлен обратно на страницу. Например:
$(document).ready(function(){
// bind event handlers when the page loads.
bindButtonClick();
});
function bindButtonClick(){
$('.myClickableElement').click(function(){
... event handler code ...
});
}
function updateContent(){
$.ajax({
url : '/ajax-endpoint.php',
data : {'onMyWay' : 'toServer'},
dataType : 'html',
type : 'post',
success : function(responseHtml){
// .myClickableElement is replaced with new (unbound) html element(s)
$('#container').html(responseHtml);
// re-bind event handlers to '.myClickableElement'
bindButtonClick();
}
});
}
2) Более элегантный способ справиться с этим: используйте метод jQuery.on(). С его помощью вы можете привязывать обработчики событий к элементам, отличным от цели события, т.е. К элементу, который никогда не удаляется со страницы.
$(document).ready(function(){
$('body').on('click','.myClickableElement',function(){
... event handler code ....
});
});
Некоторые дополнительные пояснения:
В методе .on() используется делегирование событий, чтобы сообщить родительскому элементу сохранить код обработчика событий (3-й аргумент) и запускать его, когда объект (2-й аргумент) имеет определенный тип события (1-й аргумент), выполненный на нем.
Если вы используете версию jQuery до 1.7, используйте теперь устаревший метод delegate, который по сути делает то же самое.
Кроме того, стоит отметить, что из-за того, как события "пузырятся" через дерево dom, цель события (второй аргумент метода .on()) должна быть потомком делегирующего элемента (селектор объектов jQuery), Например, следующее НЕ будет работать
<div id="container-1">
<div>
<div id="another-div">
Some Stuff
</div>
</div>
</div>
<div id="container-2">
<a id="click-me">Event Target!!!</a>
</div>
<script type="text/javascript">
$('#container-1').on('click','#click-me',function(){
... event handler code ....
});
</script>
Элементы body или document обычно являются безопасными, поскольку обычно каждый элемент на странице является потомком.