这无疑很简单,但我对 jquery 缺乏了解,这对我来说很复杂。基本上我有这个代码:
$(document).ready(
function() {
$( "#remove")
.click(function() {
alert("I have been clicked!");
$(this).parent().parent().remove();
});
});
我向表格添加了一个按钮,旨在删除它的行(参见上面的代码)。按钮如下:
<td ><button id='remove' type='button'>Remove</button></td>
但是,单击时它不会执行任何操作。我认为这可能与加载文档后创建按钮有关...但不知道该怎么办。
最佳答案
$( "td").on('click', '#remove', function() {
alert("I have been clicked!");
$(this).parent().parent().remove();
});
当您尝试动态添加按钮时,您需要委托(delegate)事件处理程序(也称为实时事件)。
jQuery > 1.7 中的委托(delegate)事件声明为
$(container).on(eventName, target, handlerFunction);
有关更多详细信息,请参阅.on()
您还有另一个选项,名为 .delegate()
其声明流程为:
$(container).delegate(target, eventName, handlerFunction);
因此,对于您的情况,它看起来像:
$('td').delegate('#remove', 'click', function() {
alert("I have been clicked!");
$(this).parent().parent().remove();
});
注意
这里的container
是指页面加载时属于DOM的#remove
按钮的持有者。从您发布的内容来看,您可能还有其他内容(任何有效的 jQuery selectors )
如果您无法检测到 #remove
的容器
,请使用 $(document)
或 $('body' )
而不是 $('td')
。
关于jquery - 动态添加的 Jquery 删除按钮不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10909533/