Я хочу добавить дескриптор события в элемент, который будет создан позже в DOM.
В основном, я пытаюсь сделать так, что, когда я нажимаю p#one, будет создан новый элемент p#two, затем я нажимаю p#two, скажу мне, что "p # два" щелкнул. Однако это не сработает, я не получил результат console.log "p # two clicked" после нажатия кнопки p#two.
Я использую on(), чтобы добавить событие click к p#two. Что я делаю неправильно?
Спасибо.
Ниже приведен мой пример кода:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>on() test</title>
<link type="text/css" href="#" onclick="location.href='http://localhost/jquery-ui-1.8.20.custom/css/smoothness/jquery-ui-1.8.20.custom.css'; return false;" rel="stylesheet" />
<script type="text/javascript" src="http://localhost/jquery-ui-1.8.20.custom/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://localhost/jquery-ui-1.8.20.custom/js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('p#two').on('click', function() {
console.log('p#two clicked');
});
$('p#one').click(function() {
console.log('p#one clicked');
$('<p id="two">two</p>').insertAfter('p#one');
});
}); // end doc ready
</script>
</head>
<body>
<p id="one">one</p>
</body>
</html>
$('body').on('click','p#two', function() {
console.log('p#two clicked');
});
вы также можете использовать
$(document).on('click', 'p#two', function() {
});
Подробнее о .on()
вы также можете использовать .delegate()
$('body').delegate('#two', 'click', function() {
});
Вы можете привязать $.on к родительскому элементу, который всегда будет существовать в dom таким образом.
$(document).on('click','p#two', function() {
console.log('p#two clicked');
});
Обратите внимание: вы можете заменить document на любой родительский элемент, который всегда будет существовать в dom, и чем ближе родитель, тем лучше.
Проверить документ $. on
Live обесценивается. вместо этого используйте $.on. Эквивалентный синтаксис $.on для $.live и $.delegate
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
Я предлагаю вам использовать $.on для всех целей обработки событий, поскольку все другие методы маршрутизируются методом $.on под капотом.
Проверьте определение этих функций из источника jQuery v.1.7.2
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
die: function( types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
}
Вы можете видеть, что все методы используют сами $.on и $.off. Поэтому, используя $.on, вы можете, по крайней мере, сохранить вызов функции, хотя это не является значительным большинством случаев.
Вы хотите использовать Jquery.on
$('body').on('click','p#two', function() {
console.log('p#two clicked');
});