[英]jQuery Not Binding to Newly-Created <input> Element
这就是我所拥有的:
<script language="javascript">
$('#click').one('click', function () {
var html = '<input type="text" class="input-mini" id="new-input" />';
$(this).parent().append(html);
});
$('#new-input').on('keyup', function (e) {
alert('A key was pressed');
if (e.keyCode == 13) {
alert('Enter key pressed');
}
});
</script>
在其他SO答案的推荐下,我发现我应该使用on()
绑定动态创建的元素。 我想发生的是在用户按下ID为new-input
的<input>
内的Enter键后发生AJAX调用。 但是,根本没有按下任何键。
为了将keyup
方法绑定到新添加的<input>
元素,我需要做什么?
谢谢
.on()
并不总是绑定动态创建的元素。 仅当您通过选择器以侦听以下内容时,它才会这样做:
$('some container').on('click', '.new-input', function() { ... });
此外,ID必须唯一。 您应该使用类。
创建keyup绑定时,dom上将没有匹配的元素-尝试将第二个绑定移到回调中的第一个绑定中:
<script language="javascript">
$('#click').one('click', function () {
var html = $('<input type="text" class="input-mini" />');
html.on('keyup', function (e) {
alert('A key was pressed');
if (e.keyCode == 13) {
alert('Enter key pressed');
}
});
$(this).parent().append(html);
});
</script>
jsFiddle链接: http : //jsfiddle.net/qTd9c/
$('#click').one('click', function () {
var html = '<input type="text" class="input-mini" id="new-input" />';
$(this).parent().append(html);
$('#new-input').on('keyup', function (e) {
alert('A key was pressed');
if (e.keyCode == 13) {
alert('Enter key pressed');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.