新添加的 HTML 行不会触发自身的事件。

11 浏览
0 Comments

新添加的 HTML 行不会触发自身的事件。

jQuery的click函数在这里工作得很好。

删除    
$('.deletelanguage').click(function(){
    alert("成功");
});

但是，如果我通过ajax设置一些，$('.deletelanguage').click就不起作用了。

例如：

function CreateRow(jdata) { 
    $('#LangTable').append('删除');
}
$.ajax({        
    url: "/jobseeker/profile/",
    success: CreateRow
});

现在最后一个的$('.deletelanguage').click不起作用。

jsfiddle示例：http://jsfiddle.net/suhailvs/wjqjq/

注意：CSS在这里工作正常。

我希望这些新添加的可以与jQuery click一起正常工作。

0

3 答案

0 Comments

当您使用$('.deletelanguage').click()注册事件处理程序时，它只会将处理程序添加到在执行代码时存在于DOM中的那些元素中。

在这里，您需要使用基于委托的事件处理程序。

$(document).on('click', '.deletelanguage', function(){
    alert("success");
});

谢谢，使用$(document)而不是元素本身，然后在.on()参数中声明元素，它确实起作用！

这是真正的答案。

0
0 Comments

最近遇到一个问题，就是在我的HTML表格中新添加的行并不会触发事件。我在代码中使用了以下两种方式来绑定事件：

$('body').delegate('.deletelanguage','click',function(){
    alert("success");
});

或者

$('body').on('click','.deletelanguage',function(){
    alert("success");
});

然而，无论我怎么添加新的行，它们都不会触发事件。经过分析，我发现了这个问题的原因，并找到了解决方法。

问题的原因是，我在绑定事件的时候使用了body作为事件的代理元素。当我添加新行时，这些新行并不是body的子元素，所以它们无法触发事件。

解决这个问题的方法是将事件的代理元素更改为一个已经存在于页面中的父元素，而不是body。通过这样做，新添加的行会成为这个父元素的子元素，从而能够触发事件。

下面是修改后的代码：

$('.table').delegate('.deletelanguage','click',function(){
    alert("success");
});

或者

$('.table').on('click','.deletelanguage',function(){
    alert("success");
});

在这里，我将事件的代理元素更改为了一个名为table的父元素，这样新添加的行就能够触发事件了。

通过以上的修改，我成功地解决了新添加的HTML行不触发事件的问题。希望这篇文章对其他人在遇到类似问题时有所帮助！

0
0 Comments

问题的原因是.click只适用于已经存在在页面上的元素。如果要绑定将来添加的元素，必须使用类似于.on的方法。

解决方法是使用.on方法来绑定事件，代码如下：

$("#LangTable").on("click",".deletelanguage", function(){
  alert("success");
});

我之前也遇到过这个问题，你必须确保在第一个$('#here')中使用一个父级的id或类，然后在"click"后面使用按钮的实际类名。感谢你的答案。

像之前所说的那样，你必须找到一个不会动态添加的父级id/类。

值得一提的是，父级元素不应该是AJAX调用的一部分。换句话说，父级元素不应该由AJAX调用生成。

0