jQuery onChange事件处理程序触发函数两次

Question

这是表http://jsfiddle.net/djochw6L/1/应该在项目列中输入值时触发该事件

$(document).on('change', '.item', function() {
    var ite = $(this).closest('tr');
    getdetails(ite);
})//event

function getdetails(dat){
    var itemName = $(dat).find('.item').val();
    alert (itemName);    
};

事件处理程序在第一行工作正常。 但是从第二行开始，它会触发两次。 为什么是这样？

Answer 1

触发两次的原因是，您的on change元素会为每个带有名称项的类触发。 如果仔细阅读代码，您会发现在为每个表列分配类项目的同时，还可以将项目类传递给添加的每一行。 因此，事件触发两次，一次触发该行，一次触发item列。

给你的问题的代码是

prot.attr("class", id + " item")

尝试通过不将item类传递给表行来解决问题，而不是对事件侦听器进行各种处理。

您可以按照以下方式构建代码

prot.attr("class", "item-" + id)

Answer 2

尝试添加return false：

$(document).on('change', '.item', function () {
    var ite = $(this).closest('tr');
    getdetails(ite);
    return false;
}) //event