Touchstart事件委托

Touchstart Event delegation

本文关键字：事件 Touchstart      更新时间：2023-09-26

update:此问题发生在动态创建的元素我有一个页面，我在ajax加载产品到一个网格。每个产品都是一个div，我希望可以点击它来将信息添加到购物车中。

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

事件委托似乎不适合touchstart或其他东西。

这是代码，在Chrome或火狐在桌面页面点击工作，如果我模拟移动设备触摸不工作，有什么想法吗?

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

我发现了问题:在不同的分辨率下调整浏览器窗口的大小，我看到单击都不起作用，所以我查看了计算属性搜索发生了什么变化。属性float为div "product"下的元素在一定的分辨率下被取消设置，然后我手动设置有浮动左，神奇地这个问题消失了。现在我有一个问题，每次触摸都能工作两次，但这是另一个故事。我也遵循了@Daniel Shillcock的承诺暗示，即使不是那个问题。感谢所有

在呈现新创建的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");
            });
          })
        }
      });
  }
相关文章：