Javascript jQquery:change事件即使在不应该触发的情况下也会触发

我正在构建一个生成ID的应用程序，在AJAX调用完成后，ID作为其值附加到输入中。发生这种情况时，通过调用输入上的.trigger（'change'）来触发'change'事件。执行此操作的代码如下所示：

$('form.card').each(function(index, element) {
    $.ajax({
        url: 'save-content.php',
        method: 'POST',
        data: $ajaxData,
        success: function(returnData){ // the ID is received as 'returnData'
            if ($create) { $(element).children('input[name=id]').val(returnData).trigger('change');
            //ID added as input value and 'change' event is triggered
            }
        }
    });
});

我使用jQuery文件上传插件。每次完成文件上载时，都会在每个文件上触发“完成”事件。由于ID是通过ajax接收的，所以脚本会检查是否有任何值，如果没有，它会为输入“change”附加一个事件侦听器。代码如下（包括jQuery文件上传插件中的部分）：

现在的问题是：第二个代码中的更改事件即使是在其他输入[name=id]（来自另一个具有自己输入[name=id]的form.card）上触发时也会被接收。让我解释一下：第一个代码在每个form.card上运行，每个form.card都有自己的输入[name=id]，当来自AJAX的id被追加时，事件会触发该输入。然后，当我们从jQuery文件上传插件（可以在多个form.fileupload上运行）上传文件时，会触发“完成”事件，为更改事件注册侦听器。当您从third form.fileupload上传文件时，来自third form.fileupload done事件的事件侦听器捕捉到来自第一个表单的更改

这已经让我疯狂了两天了。我已经检查了触发事件的对象和侦听器：它们是相同的

因此，我需要的是连接到third form.card中的input[name=id]的事件侦听器，以便仅捕获来自third form.card中的input[name=id]的更改事件，而不是第一个

---

编辑：这里是我的一个问题：添加超时以模拟AJAX响应延迟。

正如我在评论中所说的，您似乎有事件传播问题

您可以在这里了解它：

---

我认为您可以在自己的事件中添加名称空间，这样只有您的侦听器才能听到它

trigger('change.myCustomChangeEvent')
...
$(document).one('change.myCustomChangeEvent', $id, function() {

请参见此处有关名称空间的部分：

---

好的，我现在有了。问题是，事件侦听器是在文档上创建的，而不是输入[name=id]所在的form.card。即使我在selector参数中指定了确切的对象，事件侦听器也被附加到每个输入[name=id]

所以我需要做的就是改变这一点：

$(document).one('change', $id, function() {
    //'change' event fired, do the AJAX magic
});

对此

$(this).siblings('form.card').one('change', $id, function() {
    //'change' event fired, do the AJAX magic
});

这样，事件侦听器将附加到特定form.card中的特定输入

---

这是一个有效的工具：

听起来像是事件传播，如果你能展示一个工具会很有帮助。使用@saar，你正在遭受传播（“冒泡”）的痛苦。我将在一分钟内尝试创建一个工具。但是，既然更改事件在指定对象上触发，它怎么会冒泡呢？我现在已编辑了问题并添加了到小提琴的链接。我现在添加了小提琴，以便您可以看到问题的实际情况。我已尝试将我的自定义事件名称添加到小提琴中，并且效果良好。。。然而，在我的真实代码中，这不起作用……好吧，这也不起作用，前面的评论是不正确的

$(this).siblings('form.card').one('change', $id, function() {
    //'change' event fired, do the AJAX magic
});