作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个简单的 div,可以动态附加按钮,现在除了列表中的最后一个元素之外,所有按钮单击事件都会触发,有时会触发,有时不会。如果我单击按钮中的左侧或右侧图标,它工作得很好,如果我单击按钮的文本或中间,有时会触发,有时不会。
<div id="btn-list"></div>
在加载 dom 后加载页面时,我会附加随机数量的按钮,并将单击事件监听器添加到按钮。
$( function () {
for (var i=0;i<arr.length;i++) {
var item = arr[i];
var btn = $(document.createElement('button'));
btn.text(item['description']);
btn.attr('id', i);
$("#btn-list").append(btn);
}
$('#btn-list').on('click', 'button', function (e) {
e.preventDefault();
e.stopPropagation();
window.location.replace('blah.html');
});
}
我正在使用 jQuery 2.0。
最佳答案
如果没有额外的代码,此代码片段应该不会失败。请记住,对最后添加的按钮的引用保留在 btn
中,因此,如果在代码的其他部分修改了元素或其事件,则会改变预期的行为。
您是否添加了一些调试输出来确认单击事件未触发? http://jsfiddle.net/AstDerek/gKJNe/
$('#btn-list').on('click', 'button', function (e) {
e.preventDefault();
e.stopPropagation();
alert('blah.html');
})
添加了一个简单的测试,在我测试的浏览器上没有失败,也许它仅限于您的浏览器? http://jsfiddle.net/AstDerek/gKJNe/1/
现在,如果将按钮创建封装到其自己的函数中会发生什么?
function create_button (index,properties) {
var btn = $(document.createElement('button'));
btn.text(properties.description);
btn.attr('id',index);
$("#btn-list").append(btn);
return btn;
}
for (var i=0;i<arr.length;i++) {
create_button(i,arr[i]);
}
最后,作为一种解决方法,为什么不添加一个隐藏按钮作为最后一步?
for (var i=0;i<arr.length;i++) {
create_button(i,arr[i]);
}
create_button(-1,{description:''}).hide();
关于javascript - 动态列表的最后一个按钮并不总是用 jQuery 触发点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17283886/
我是一名优秀的程序员,十分优秀!