javascript - Touchstart 事件委托(delegate)

Question

更新:这个问题发生在动态创建的元素上 我有一个页面，我在其中将 ajax 中的产品加载到网格中。每个产品都是一个 div，我希望可以单击它以将其信息添加到购物车。

使用 Jquery click 事件一切正常，但此页面必须在移动设备上使用，所以我想使用 touchstart 事件，但我如何编写它不起作用!

似乎事件委托(delegate)不适用于 touchstart 或其他东西。

这是代码，在桌面页面的 Chrome 或 Firefox 中点击有效，如果我模拟移动设备触摸不起作用，有什么想法吗？

<div class="col-xs-12 col-md-offset-3 col-md-6 col-md-3 col-lg-offset-3 col-lg-6 col-lg-3 ">
    <div class="tiles" id="products"></div>
</div>

$("#products").on("click touchstart", ".product-tile", function (e) {
    console.log("OK");
});

function getProducts() {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/aj/ProductWs.asmx/GetListJson",
        data: "{ id_category: '<%= id_category%>' }",
        success: function (data) {
            var j = jQuery.parseJSON(data.d);
            var products = '';
            var colors = ["bg-blue-madison", "bg-purple-studio", "bg-green-meadow", "bg-grey-cascade", "bg-red-intense", "bg-green", "bg-blue-steel", "bg-yellow-lemon", "bg-red-sunglo"];                        

            if (j != null) {
                for (var i = 0; i < j.length; i++) {
                    var colore = colori[Math.floor((Math.random() * 8) + 1)];
                    products += '<div class="col-md-4 col-sm-4 col-xs-4"><div class="tiles-bar product-tile tile ' + colore + '" data-idproduct = "' + j[i]["ID_Product"] + '" data-name = "' + j[i]["Name"] + '" data-price = "' + j[i]["Price"] + '"><div class="tile-object"><div class="name">' + j[i]["Name"] + ' € ' + j[i]["Price"] + '</div></div></div></div>';
                }
            }
            $("#product").append(products);
        }
    });
}

Answer 1

我发现了问题:以不同的分辨率调整浏览器窗口的大小我发现点击都不起作用，所以我查看了计算属性以搜索发生了什么变化。在某个分辨率下，div“产品”下的元素的属性 float 未设置，然后我手动设置为向左浮动，神奇地这个问题消失了。现在我的问题是触摸每次触摸都会工作两次，但这是另一回事了。 我也遵循了@Daniel Shillcock promise 提示，即使这不是问题所在。感谢大家