Touchstart活动代表团

Question

更新：在以dinamically创建的元素上会出现此问题 我有一个页面，我将ajax中的产品加载到网格中。每个产品都是一个div，我想点击它以将其信息添加到购物车。

一切正常，使用Jquery点击事件，但这个页面必须在移动设备上使用，所以我想使用touchstart事件，但我怎么写它不起作用！

事件委托似乎不适用于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＆＃34; product＆＃34;下的elemente属性 float 在一定的分辨率下没有设置，然后我手动设置浮动左，神奇地这个问题消失了。现在我有一个问题，触摸每次触摸两次，但这是另一个故事。 我也跟着@Daniel Shillcock承诺暗示，即使不是那个问题。感谢所有

Answer 2

您在渲染新创建的DIV元素之前声明onclick。在 DOM更新后分配eventlistener ，如下所示：

promise()文档https://api.jquery.com/promise/

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>';
          }
        }
        var $product = $('#product');
        $product.append(products).promise().done(function({
            $product.on("click touchstart", ".product-tile", function(e) {
              console.log("OK");
            });
          })
        }
      });
  }