标签 javascript jquery
<分区>
我对 jquery 中的 .click() 事件有疑问。我创建了一个带有按钮的输入标签，然后当我点击这个标签时它必须显示一条警告消息。但它不起作用。 这是 HTML 代码:
<div id="test">
</div>
<input type="button" id="btn" value="Submit" />
以及 Jquery 代码:
$("#btn").click(function(){
html = "<input type='text' size='1' name='courses[]' value='1' />";
$("#test").after(html);
});
$("input[type='text']").on("click", function(){
alert('ppp');
});
所有的jquery库都在真实站点中链接。 这是 jsFiddle 中的示例:http://jsfiddle.net/82pps6Lz/29/ 谢谢
最佳答案
想想，你插入一个新的<input>只有当你点击按钮时才会有元素，但是你绑定(bind)了一个 click事件马上发生，当<input>元素还不存在。所以你要么应该在元素插入之后(或期间)绑定(bind)事件:
$('#btn').click(function(){
var html = "<input type='text' size='1' name='courses[]' value='1' />";
$(html).on('click', function() {
// ...
}).insertAfter('#test');
});
... 或使用 DOM event delegation :
$('#btn').click(function(){
var html = "<input type='text' size='1' name='courses[]' value='1' />";
$('#test').after(html);
});
$(document).on('click', 'input[type="text"]' function() {
// ...
});
关于javascript - jquery 单击输入[类型 =''] 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25628080/
相关文章：
javascript - 使用 javascript 更改外部 SVG 文本
javascript - Bootstrap timepicker只选择第一个timepicker元素
javascript - Vue Watcher 无法处理使用 Vue.extend 创建的组件
javascript - 如何将 AJAX $http 调用转换为 Angular.JS
javascript - 在 onclick 事件上滑动隐藏的 div
javascript - Div 破坏了 jQuery Accordion