我有几排产品供客户选择。这些行具有“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停止。
答案 0 :(得分:3)
错误在于您的地图功能。 jQuery中有两个map函数。
$('element').map()与jQuery.map()
如文档中所述,第一个生成一个包含返回值的新jQuery对象,而第二个将数组或对象中的所有项转换为新的项数组。
序列化新创建的对象并将其传递给ajax请求不起作用,因为它在其中具有递归引用。 [谢谢@ADyson]
$(".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!");
}