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上，点击事件没有被触发：这只是因为＆＃34; href＆＃34; -attribute on the on a-tag丢失了。所以要么添加＆＃34; href =＆＃39;＃＆＃34;＆＃39;或 - 仔细观察 - 添加＆＃34;光标：指针＆＃34;到了CSS的CSS！：-o

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

这样可行，你的函数中有一个拼写错误，应该关闭括号。

Answer 2

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

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

有关更多详细信息，请参阅文档（直接和委派活动部分） http://api.jquery.com/on/

Answer 3

您可以使用modernizr执行此任务。你可以找到解决方案。

jQuery：绑定事件到元素直接起作用，在文档上绑定相同的东西（iOS）

3 个答案: