点击事件对于动态添加的按钮不起作用。

30 浏览
0 Comments

点击事件对于动态添加的按钮不起作用。

我参考了使用jQuery创建div元素并使用Javascript创建了一个div元素。然而，当我动态添加一个按钮元素时，点击不起作用。我们需要做什么更改才能使按钮点击起作用？

注：由于在绑定到Dom中嵌套的多个视图模型的要求中提到的kendo控件要求，我们不能将函数移动到document.ready之外。

更新的参考资料

  1. 使用jQuery on()绑定点击事件不会在Ajax调用时注入HTML上触发
  2. 如何为新注入的HTML附加jQuery事件处理程序？
  3. 通过jQuery注入HTML后，事件处理程序不起作用，即使使用委托或不使用委托也不起作用

代码

    
    
    



A

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

你必须使用 \ 转义引号，或混用单引号和双引号:

"hello   "
'hello   '
'hello   '
"hello   "

另一个问题是你使用的是内联事件监听器。这些运行在全局上下文中，因此不能运行在闭包内声明的函数。

要么将 showMakeAndHold 设为全局函数，要么更好地以更好的方式添加事件监听器:

$(".statiscDIV")
    .append('FIRST')
    .append('hello ')
    .find('button').on('click', showMakeAndHold);

Demo

0
0 Comments

当你将代码注入到DOM中时，jQuery的事件处理程序不会连接/绑定到新元素。(jQuery已经在注入新代码之前对DOM元素进行了绑定)。因此，当你点击一个按钮时，没有捕获到jQuery的点击事件。

要连接事件处理程序(从而获取来自)注入的元素，必须使用jQuery .on()，如下所示：

jsFiddle演示

$(".statiscDIV").append('FIRST');
$(".statiscDIV").append('hello   ');
$(document).on('click','.MakeHoldDetailLinkButton',function(){
    showMakeAndHold();    
});
function showMakeAndHold() {
    alert("HIIIIIII");
}

.on()方法是在jQuery 1.7中添加的，用来代替bind()、.delegate()和.live()，它们都可以实现同样的功能。(要从任何DOM元素上解除事件处理程序的绑定，请使用.off())

来源：http://api.jquery.com/on/

0