Элементы jQuery, игнорирующие щелчок (), кодируют, если добавлено к DOM после pageload
Это действительно полезно людям, которые будут использовать Ваш класс для списка открытого интерфейса сначала. Это - часть, о которой они заботятся и могут использовать. Защищенный и частный может следовать вперед после.
В открытом интерфейсе, это удобно для конструкторов группы, средств доступа свойства и мутаторов и операторов в отличных группах.
3 ответа
Ваша проблема в том, что click () связывает прослушиватель событий с каждым элементом в текущем сопоставленном наборе. Это не волшебство, и он не будет задним числом применять прослушиватель событий к новому контенту, который вы добавляете в DOM. У вас есть следующие варианты:
- Используйте функциональность живых событий в jQuery, как уже упоминалось другими.
- Сделайте что-то подобное самостоятельно, привязав обработчик кликов к некоторому общему предку элементов, в которых вы ' Вам интересно, а затем тестируйте цель каждого клика, который вы видите, чтобы определить, заботитесь ли вы о ней. Например:
$ (function () { $ ("div.test"). click (function (e) { if ($ (e.target) .is ("a")) { оповещение («щелчок»); вернуть ложь; }); }); }); - В коде, который добавляет новые элементы в DOM, также привяжите к ним обработчики событий. Например:
$ (document.createElement ("a")) .attr ("href", "#") .text ("Проверить ссылку 2") .click (function () {alert ("щелчок");}) .appendTo ("div.test");
ЕСЛИ вы используете jquery live , эта проблема решится. jquery live Привязывает обработчик к событию (например, щелчку) для всех текущих и будущих сопоставленных элементов.
$("div.test a").live("click", function(){ //change to this
});
Ваш код можно очистить и действовать так, как вы надеетесь:
<html>
<head>
<title>SO Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="test">
<a href="#" title="Test">Test Link</a>
</div>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("div.test a").live('click', function() {
alert("click");
return false;
});
$('<a href="#">Test Link 2</a>').appendTo("div.test");
});
-->
</script>
</body>
</html>
Примечание: прямая трансляция недоступна для jQuery 1.9