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