Question

我有点奇怪的错误＆＃34; （引用因为它没有破坏任何东西，它只是控制台中的一个错误）。

我有一个模拟零售网站的网站。当您单击某个项目时，会弹出一个div，询问您是否要将其添加到购物车。如果按确认，它会将产品名称和价格发送到将其添加到EasyUI数据网格的函数，如下所示：

检查产品是否已被点击：

$(document).on('click', '.item', function() {
        if (ismobile) {
            price = $(this).find('p.title').attr("data");
            name = $(this).find('p.title').html();
            image = $(this).find('img').attr("src");            

            mobileproducts(price, name, image);
        }
    });

检查是否＆＃34;添加到购物车＆＃34;已被点击：

$(document).on('click', "#mob_add", function() {
        name = $(".mob_title").html();
        //price = $(".mob_price").html();

        addProduct(name, parseFloat(price));
        console.log(name + parseFloat(price));
        $("#popup").hide();
    });

将其添加到Datagrid（购物车）的功能。

function addProduct(name, price) {
    function add(){
        for (var i=0; i<data.total; i++) {
            var row = data.rows[i];
            if(row.name == name) {             ** ERROR HAPPENS ON THIS LINE **
                row.quantity++;
                return;
            }
        }
        data.total++;
        data.rows.push({
            name:name,
            quantity:1,
            price:price
        });
    }
    add();
    ...
}

现在正如我所提到的，这完全正常，没有问题。该商品已添加到购物车中，如果该商品不止一件，则商品数量会增加。如果您将产品拖到购物车而不是单击它，打印没有错误，这也可以正常工作。

可以看到一个演示here :(注意，要点击产品，窗口必须<900px宽度，拖放需求窗口必须> 900px）

我想知道的是，为什么会发生这种错误。

编辑我还发现，当您首次加载页面并添加产品时，不会打印错误，但在此之后添加产品会导致错误。如果您重新加载页面，打开产品对话框，关闭它而不添加到购物车，然后将任何产品添加到购物车，也会发生这种情况。

Answer 1

在有用的评论和必要的downvotes之后，我再次查看了调试器。似乎使用该对话框会导致对产品进行一次额外的迭代（并且最后一行未定义）。

您可能有两次调用add()函数。

<强>更新

使用firefox我在本地驱动器上暂时保存了网页（使用完整版）。

我注意到处理click事件的功能（在对话框中）显示我的警告test两次而不是一次。

$(document).on('click', "#mob_add", function() {
        name = $(".mob_title").html();
        //price = $(".mob_price").html();

    alert("TEST"); // Should run only once
    addProduct(name, parseFloat(price));
    console.log(name + parseFloat(price));
    $("#popup").hide();
});

<强>更新您正在重新使用相同的对话框，并使用选择器将新的点击处理程序重新添加到document对象。

如果每次出现对话框时调用mobileproducts，则每次都会绑定一个额外的点击处理程序。

    function mobileproducts(price, name, image) {
        $("#popup").show();
        $(".mob_title").html(name);
        $("#popup > img").attr("src", image);
        $(".mob_price").html("£" + price);


        $(document).on('click', "#mob_close", function() {
                $("#popup").hide();


    });
     alert('binding again');
        $(document).on('click', "#mob_add", function() {
            name = $(".mob_title").html();
        //price = $(".mob_price").html();

        alert("TEST");
        addProduct(name, parseFloat(price));
        console.log(na

me + parseFloat(price));
            $("#popup").hide();
        });

        console.log("CLICKED: " + name + " WITH PRICE: " + price + " AND IMAGE URL: " + image);
    }

修复

最快的解决方法是首先停止绑定文档，然后切换到使用弹出窗口（甚至是按钮）。此外，在找到新功能之前，您应该解除之前的绑定。

下面的工作示例：

function mobileproducts(price, name, image) {
    $("#popup").show();
    $(".mob_title").html(name);
    $("#popup > img").attr("src", image);
    $(".mob_price").html("£" + price);
    //alert("TEST2");

    $("#popup").unbind('click');

    $("#popup").on('click', "#mob_close", function() {
        $("#popup").hide();
    });
    $("#popup").on('click', "#mob_add", function() {
        name = $(".mob_title").html();
        //price = $(".mob_price").html();


        addProduct(name, parseFloat(price));
        console.log(name + parseFloat(price));
        $("#popup").hide();
    });

    console.log("CLICKED: " + name + " WITH PRICE: " + price + " AND IMAGE URL: " + image);
}

更好的解决方法是使用on进行一次BIND，并重构代码以使用该函数可用的单例参数。

无法阅读财产＆＃34; name＆＃34;未定义的

1 个答案:

修复