jQuery中<a>元素的点击事件触发两次

Question

我有一个点击事件被调用了两次，但我不知道为什么。

Razor/Html：

<li class="active">
    <a href="#" class="listitem">@Model[i].Name</a>
    <span style="display:none" class="id">@Model[i].ID</span>
</li>

这是在一个包含多个列表项的for循环中。

JQuery：

$(".listitem").on("click", function () {
    var id = $(this).siblings("span").html();
    $.ajax({
        url: '@Url.Action("SelectItem", "Home")',
        type: "POST",
        data: $("#form").serialize() + "&id=" + id,
        success: function (result) {
            $('#partialView').html(result);
        }
    });
});

^ 处理列表项的点击。

通过Ajax调用我的控制器刷新局部视图。我的js包含在局部视图中并进行了刷新，但我不明白为什么这个事件会被调用两次（通常第二次的id是undefined）。也许我只是犯了一个我没有注意到的简单错误？

我知道有很多关于点击事件被调用两次的问题，但我认为我的情况可能足够不同以至于需要一个问题。我也没有看到很多好的答案。

- aw04

---

问题似乎在于您使用了部分视图，因为整个DOM在每个jQuery请求中都没有重新加载。因此，.on()方法将一遍又一遍地注册您的单击事件。考虑使用.off()和.on()，例如$(".listitem").off("click").on("click", function() { ... });。 - jacqijvv

我不确定是什么原因导致了问题，所以这里只是瞎猜。我从来没有尝试过将任何东西与form.serialize结合使用。如果你删除它的+ id部分，会有什么区别吗？ - Matt Bodily

你能提供更多的源代码吗？确切的页面来跟踪问题是什么？可能是你的$(".listitem").on调用被调用了两次。 - K D

只有当目标元素在页面加载时不存在，并且稍后通过ajax或javascript添加到dom中时，我们才应该使用jquery.on。 - K D

嗯...如果有选择的话..更喜欢使用jQuery的Click而不是On :) 好的，我们可以检查代码，很容易追踪页面中的错误。 - K D

Answer 1

我认为你可能在函数末尾缺少了一个"return false"。如果没有这个，浏览器也会去执行a标签的点击事件。

- Nigel Ellis

---

谢谢。我曾经多次陷入这个陷阱，即在向A标签添加点击事件时没有添加返回。 - Nigel Ellis

您还可以使用 e.preventDefault(); 和 e.stopPropagation();。 - m4tt1mus

Answer 2

把脚本放在局部视图中通常不是一个好主意，因为它会被插入到页面的中间。我建议将脚本从局部视图移动到主页面中。为了将点击事件附加到动态添加的字段上，请将您的点击事件更改为触发文档。

$(document).on('click', '.listitem', function(){ ...

看看这是否有帮助。

此外，在处理数据时，如果我有多个变量，我会对其进行命名。尝试像这样更改数据。

data: { form: $('#form').serialize(), id: id },

那就确保控制器中的输入与这些名称匹配即可。

- Matt Bodily

---

解决方法很糟糕，但是既然你在第二次调用时提到id为null，你可以将ajax调用放在一个id！= null的if语句中。 - Matt Bodily

在控制器上使用我提供的名称作为输入参数，需要匹配（表单，ID）。 - Matt Bodily

对于我的代码，我只有 $('form')。看看这是否有帮助。 - Matt Bodily