David David - 17 days ago 7
Javascript Question

Touchstart Event delegation

update: this problem occurs on elements dinamically created
I have a page where i load products in ajax into a grid. Each product is a div that i want to be clickable to add its information to a cart.

All works fine using Jquery click event but this page must be used on mobile so i want to use touchstart event but how i wrote it doesn't work!

It seems event delegation doesn't work for touchstart or something else.

this is the code, in Chrome or Firefox in Desktop page click works, if i emulate mobile device touch doesn't work, any ideas?

<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

I found the problem: resizing browser window at different resolution I saw that neither click worked, so i looked at computed properties searching what have changed. The property float for the elemente under the div "product" under a certain resolution was unset, then i set manually to have float left and magically this problem disappeared. Now i have the problem that touch works two times each touch but this is another story. I also followed @Daniel Shillcock promise hint even if was not that the problem. Thanks to all

Comments