Question

我有几排产品供客户选择。这些行具有“product-line”类。在单击一行时，我想通过切换“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时，click事件只触发一次，一切正常。 toggleClass完成其工作，显示该行已被选中。当我添加$ .post时，一切都变得疯狂，当达到$ .post时，它只会再次触发click事件，导致无限递归。

onProductLineClicked中的参数'e'永远不会定义，而不是第一次。使用e.preventDefault（）会在第二次通过时导致错误。

我很难过。我无法理解POST如何或为何会导致点击再次触发，并删除发生的POST停止。

Answer 1

错误在于您的地图功能。 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!");
}

$ .post会导致点击事件递归

1 个答案: