jQuery - Добавление ссылки на html()

Question

У меня есть ссылка внутри элемента div. Ссылка имеет прослушиватель кликов.

$(document).ready(function() { 
    $('#theLink').click(function() { 
     // do stuff 
    }); 
}) 

<div id="myElement"><a class="myLink" id="theLink">Click here</a></div> 

В какой-то момент в моей заявке, я должен очистить Div элементы содержимого, а затем переписать их позже. Когда я переписываю ссылку, используя .html (''), я теряю прослушиватель кликов, и ссылка не работает.

$('#myElement').html(''); // clear element 

$('#myElement').html('<a class="myLink" id="theLink">Click here</a>'); 

Нужно ли добавить нового слушателя, чтобы эта ссылка снова работала?

Answer 1

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

Редактировать: Вы можете прочитать ниже подход в своем documentation. См. Раздел Прямые и делегированные события.

См DEMO здесь

что-то вроде ниже должно работать,

$('#myElement').on('click', '#theLink', function() { 
    alert('HI!'); 
}); 

Я думаю, что внутри JQuery делает что-то, как показано ниже,

$('#myElement').click (function (e) { 
    if (this.id == 'theLink') { 
     alert('Hi!'); 
     e.stopPropogation();   
    } 
}); 

Answer 2

Вы, вероятно, следует использовать jQuery's on() функцию (JQuery 1.7+). Это позволит вам связать событие click с вашим элементом независимо от того, сколько раз вы добавляете и удаляете его.

Например:

$("#theLink").on("click", function(event){ 
    //do stuff; 
}); 

Update: Для JQuery ранних версий, чем 1.7 использование либо bind() или live() (в зависимости от точной версии JQuery). Используется тот же синтаксис.

Answer 3

Я думаю, что

$('#myElement').children('id!="myLink"').remove() 

должны удалить все дети контейнера DIV, кроме ссылки. Тем не менее, я не уверен, правильно ли форматируется выражение селектора внутри children(), что может привести к синтаксической ошибке. Если да, просьба прокомментировать, и я отредактирую ответ.