jQuery：将事件绑定到元素直接有效，在文档上绑定相同（iOS）

Question

我目前正在调试具有以下元素的网络应用程序：

<a class="btn btn__add-to-cart" data-target="/someURL" data-cart="modal" title="add to basket">
  <svg class="icon icon__cart icon--lg" role="img" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/_ui/17.2.0.173/desktop/common/images/icons/icon-sprite.svg#cart"></use>
  </svg>
</a>

有一个函数绑定到外部元素，如下所示：

$(document).on('click', '[data-cart="modal"]', function(evt){
  alert('test-on-document');
})

不在 iOS 9、10、11 Safari 和 Chrome 上运行。

如果我像这样直接将相同的函数绑定到元素：

$('[data-cart="modal"]').on('click', function(evt){
  alert('test-direct');
})

它起作用了——更神奇的是，绑定到文档的第一个函数也被执行了。

当然，这在独立环境中确实有效，但在应用程序上下文中却不行。我一直在寻找 CSS 中的指针事件或绑定到它的其他一些函数，但尤其是最后一部分（文档函数在添加直接绑定函数后工作）毫无意义。

有什么提示吗？

解决方案

经过长时间的搜索，我想出了为什么在 iOS 上没有触发点击事件：这仅仅是因为 a-tag 上的“href”属性丢失了。所以要么添加 "href='#"' 或者 - 仔细观察 - 将 "cursor:pointer" 添加到 a 的 CSS 中！ :-o

Answer 1

$(document).on('click', '[data-cart="modal"]', function(evt){
  alert('test-on-document');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<a class="btn btn__add-to-cart" data-target="/someURL" data-cart="modal" title="add to basket">
  <svg class="icon icon__cart icon--lg" role="img" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/_ui/17.2.0.173/desktop/common/images/icons/icon-sprite.svg#cart"></use>
  </svg>
</a>

这行得通，你的函数中有一个错字，evt 括号应该被关闭。

Answer 2

简答：委托事件不适用于 SVG 元素。

详细回答： 在您的第一个示例中，您在文档级别附加事件处理程序，并且事件从后代元素（由选择器指定）一直上升到文档级别，然后调用您的处理程序。 但是，当后代是 SVG 时，这不起作用。 在第二个示例中，事件处理程序直接位于 SVG 元素上。 这就是它起作用的原因。

有关详细信息，请参阅文档（直接和委托事件 部分） http://api.jquery.com/on/