On и Live ведут себя по-разному при динамическом добавлении элементов
У меня есть следующий код, я пытался с JQuery Live и на плагине, пытаясь с живым, я могу добавить обработчик событий, который уже присутствует для элемента с классом "кнопка" к недавно добавленному элементу (добавлен динамически после загрузки страницы) с классом "кнопка", но при попытке с плагином jQuery, я не могу добавить уже существующий обработчик событий для вновь добавленного элемента.
Пример с Live
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="script/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<!--START: Adding of javaScript library need internet Connection-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--END: Adding of javaScript library need internet Connection-->
</head>
<script>
jQuery(document).ready(function(){
jQuery(".button").live("click", test);
});
var i=0;
function test(event){
var elem=jQuery(this).parent().html();
jQuery("body").append("<div class=DivClass" + i++ + ">"+elem+"</div>" );
}
</script>
<body>
<div id="Container"><input value="click me" class="button" type="button"/></div>
</body>
</html>
Пример с включенным
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<!--START: Adding of javaScript library -->
<script type="text/javascript" src="script/jquery.min.js"></script>
<!--END: Adding of javaScript library-->
<!--START: Adding of javaScript library need internet Connection-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--END: Adding of javaScript library need internet Connection-->
</head>
<script>
jQuery(document).ready(function(){
jQuery(".button").on("click", test);
});
var i=0;
function test(event){
var elem=jQuery(this).parent().html();
jQuery("body").append("<div class=DivClass" + i++ + ">"+elem+"</div>" );
}
</script>
<body>
<div id="Container"><input value="click me" class="button" type="button"/></div>
</body>
</html>
и более того, я могу поместить код привязки обработчика событий, используя live вне jquery ready, что работает нормально, но если я поставлю привязку обработчика событий с использованием outside из jquery ready, обработчик событий не работает. Заранее благодарен за любую помощь.
2 ответа
Если вы хотите, чтобы ваш селектор тестировался динамически, вы должны передать его в качестве аргумента, как в своем коде вы вызываете функцию для постоянной пустой коллекции:
jQuery(document).ready(function(){
var i=0;
function test(event){
var elem=jQuery(this).parent().html();
jQuery("body").append("<div class=DivClass" + i++ + ">"+elem+"</div>" );
}
$(document).on("click", ".button", test);
});
(вы увидите, я определил test вот прежде чем я передам это функции, твой код болит мне на глаза)