Touchstart事件委托

Question

更新：此问题发生在动态创建的元素上

我有一个页面，通过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);
        }
    });
}

- David

---

对于移动设备，这个插件可能会有所帮助 https://github.com/benmajor/jQuery-Touch-Events - GillesC

它对我来说似乎是有效的：https://jsfiddle.net/mzksre7x/ - Alvaro

@Alvaro，你的代码是正确的，但在我的情况下，我会使用 jQuery 动态地创建 div 元素，通过从数据库中读取产品信息。 - David

@GillesC 我会尝试您的解决方案，但我想知道问题的原因。 - David

请提供AJAX调用以及您如何动态创建元素的方法。 - IronAces

@DanielShillcock 更新了代码。 - David

Answer 1

我发现了问题：在不同的分辨率下调整浏览器窗口大小后，我发现点击都没有作用，于是我查看计算属性，寻找有什么改变。在某个分辨率下，位于 "product" div 下方的元素的 float 属性未设置，然后我手动设置为 float left，神奇地解决了这个问题。现在我的问题是每次触摸都会触发两次，但这是另一个故事了。我也遵循了 @Daniel Shillcock 的提示，尽管那不是问题的原因。感谢大家。

- David

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

- IronAces

---

我不知道这个jsfiddle是如何工作的：https://jsfiddle.net/kfqpb31q/12/。即使我在5秒后附加标签，但某些地方出了问题。因此，promise()可能不是解决方案。 - kumardeepakr3

它能够工作是因为你使用 setTimeout() 来规避 jQuery 异步的特性。 - IronAces

@DanielShillcock 你是在移动仿真中尝试这段代码吗？因为我的问题也一样，我按照你的步骤操作了，但在移动仿真中触摸功能无法使用。如果我不使用移动仿真，点击就可以正常工作。 - David