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

我发现这个问题：在不同的分辨率，我看到，无论是点击工作调整浏览器窗口，所以我看了在计算的属性搜索什么已经改变。该物业浮动下一定分辨率的格“产品”下的元素系列被清除的，然后我手动设置有浮动左，奇迹般地这个问题就消失了。现在我遇到触摸每次触摸两次的问题，但这是另一回事。 我也跟着@Daniel Shillcock承诺即使没有这个问题的提示。感谢所有

Answer 2

在新创建的DIV元素被渲染之前，您正在声明onclick。分配事件侦听的DOM更新后，如下图所示：

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"); 
      }); 
      }) 
     } 
     }); 
    }