javascript - $.post导致点击事件递归

Question

我有几行产品可供客户选择。这些行具有“产品线”类。单击一行时，我想通过切换“product-checked”类向用户显示该行已被(未)检查，然后发送一条包含所有已检查行的 ID 的 POST 消息。为此，我编写了以下代码:

<script>
    $(".product-line").click(onProductLineClick);

    function onProductLineClick(e) {
        $(this).toggleClass("product-checked");
        updatePrice();
    }

    function updatePrice() {
        var ids = $(".product-checked")
            .map(function() {
                return $(this).data("id");
            });
        $.post("/Controller/Action", { 'productIds[]': ids });
        alert("Hi!");
    }
</script>

这段代码会导致 onProductLineClick 无限期地触发。警报(“嗨!”)永远不会被触发。 POST 永远不会发送。

当我删除 $.post 时，单击事件仅触发一次，一切正常。 toggleClass 完成其工作，显示该行已被选中。当我添加 $.post 时，一切都变得疯狂，到达 $.post 时，它只是再次触发单击事件，导致无限递归。

除了第一次之外，onProductLineClicked 中的参数“e”从未定义过。使用 e.preventDefault() 会在第二次经过那里时导致错误。

我被难住了。我无法理解 POST 如何或为何会导致点击再次触发，而删除 POST 可以阻止这种情况发生。

Answer 1

该错误与您的 map 功能有关。 jQuery 中有两个 map 函数。

$('element').map()与 jQuery.map()

如文档中所述，第一个生成一个包含返回值的新 jQuery 对象，而第二个将数组或对象中的所有项目转换为新的项目数组。

序列化新创建的对象并将其传递到 ajax 请求中不起作用，因为它内部有递归引用。 [感谢@ADyson]

FIDDLE

$(".product-line").click(onProductLineClick);

function onProductLineClick(e) {
  $(this).toggleClass("product-checked");
  updatePrice();
}

function updatePrice() {
  var ids = jQuery.map($(".product-checked"), function(element, index) {
      return $(element).data("id");
    });
    console.log(ids);
  $.post("/Controller/Action", {
    'productIds': ids
  });
  alert("Hi!");
}