Question

我有一个被调用两次的点击事件，我无法找出原因。

剃刀/ 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）。也许我只是犯了一个我没有看到的简单错误？

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

Answer 1

我认为你可能在函数结束时错过了一个返回false。没有它，浏览器也会进入 a 点击。

Answer 2

将脚本放在局部视图中通常很糟糕，因为它将插入到页面的中间。我建议将脚本从部分页面移动到主页面。要将click事件附加到动态添加的字段，请更改单击事件以触发文档

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

看看这是否有帮助

此外，对于数据，如果我有超过1，我将变量命名为。尝试更改这样的数据

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

然后确保控制器上的输入与这些名称匹配

<a> fires twice</a>上的jQuery点击事件

2 个答案: