Как привязать событие клика к недавно добавленному тегу <a> в jquery
У меня на странице 6 ссылок на мп3.
Плагин, который я установил, заменяет эти ссылки на swf и воспроизводит этот mp3 в строке.
Проблема было заключалась в том, что можно было активировать все 6 ссылок и одновременно воспроизводить весь звук. Я решено эту проблему (хотя я чувствую себя неуклюжим новичком), перехватывая тег <a> до того, как он был заменен тегом embed, а затем возвращал его, когда нажимали другой.
Однако теперь это моя проблема: тег <a>, который я вернул, теряет событие onClick (я думаю, что это происходит), и поэтому, если щелкнуть второй раз, не сможет переключиться, как в первый раз.
$(".storyplayer a").bind("click", function() {
// replace the <a> tag from the previous media player installation
if (previousplayerlocation != null) {$("#" + previousplayerlocation + " .storyplayer").html(graboldcode);}
// now remember this installation's <a> tag before it's replaced
graboldcode = $(this).parent().html();
// remember where I grabbed this <a> tag from
previousplayerlocation = $(this).parents("div.storylisting").attr("id");
// replaces the <a> tag with the media player.
$(this).media({width: 190,height: 30});
return false;
});
Есть ли способ переназначить событие щелчка оператору if?
Ответы 3
<a> теряет обработчик onclick, потому что он удаляется. Когда вы повторно добавляете HTML, обработчик не возвращается.
Не сильно меняя код, вы можете создать функцию, которая будет служить вашим обработчиком кликов.
function playerClicked() {
// replace the <a> tag from the previous media player installation
if (previousplayerlocation != null) {
$("#" + previousplayerlocation + " .storyplayer")
.html(graboldcode)
.click(playerClicked); // Re-add the onclick handler
}
// now remember this installation's <a> tag before it's replaced
graboldcode = $(this).parent().html();
// remember where I grabbed this <a> tag from
previousplayerlocation = $(this).parents("div.storylisting").attr("id");
// replaces the <a> tag with the media player.
$(this).media({width: 190,height: 30});
return false;
}
$(".storyplayer a").bind("click", playerClicked);
Использовать делегирование события - это означает привязку щелчка к какому-либо контейнеру и позволить этому обработать событие. Затем вы можете запросить event.target, чтобы узнать, был ли нажат якорь, и требуется ли вам поведение. Это лучше по ряду причин.
- Меньше событий, связанных с элементами (производительность)
- Нет необходимости повторно связывать события после добавления / удаления содержимого, поскольку контейнер остается постоянным и всегда будет там для обработки всплывающего события щелчка.
Код будет примерно таким:
$('#someContainer').click( function(ev){
var $el=$(ev.target);
if ( $el.is('a') ){
//do your stuff
}
});
См. Этот Почта для получения дополнительной информации
Взгляните на плагин livequery. С помощью этого подключаемого модуля вы можете привязать прослушиватели событий даже к элементам, которые недоступны в готовой DOM.
$('a').livequery('click', function(){
});
Плагин отслеживает DOM и связывает слушателей. Вы также можете самостоятельно выполнить принудительную оценку:
$.livequery.run()
Некоторые другие мощные функции:
Вы можете удалить слушателей с истекшим сроком:
$('a').livequery.expire('click')
Вы можете зарегистрировать слушателей onmatch:
$('a').livequery(
function(){ onmatchHandler},
function(){ onmismatchHandler }
);
нет необходимости в живом запросе, если вы не имеете дело с не всплывающими событиями (фокус и т. Использование - просто убийца производительности