更新:此问题发生在动态创建的元素上
我有一个页面,通过ajax将产品加载到网格中。每个产品都是一个div,我希望能够点击它以将其信息添加到购物车中。
使用Jquery click事件一切正常,但是这个页面必须在移动设备上使用,所以我想使用touchstart事件,但是我写的代码似乎不起作用!
看起来事件委托对于touchstart不起作用或者还有其他问题。
这是代码,在Chrome或Firefox中的桌面页面中,点击可以工作,如果我模拟移动设备,则touch不起作用,有任何想法吗?
<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);
}
});
}