FastClick 干扰 jQuery UI 触摸选择菜单

Question

我正在尝试实施 jQuery UI Selectmenu while using FastClick. Tapping one of the entries of the selecmenu's dropdown list is not registering on touch, closing the list without actually selecting the tapped list item. To remedy this, I'm using bind() to add the class .needsclick to the jQuery UI elements when they are created (as recommended in this answer)。这应该确保 FastClick 不会应用于有问题的元素。

不幸的是，class 仅在我打开和关闭菜单一次后添加，因此它仅在第二次尝试 select 列表项时有效，即使元素是在页面加载时插入。如何确保在 jQuery UI 插入元素时添加它？

这是一个演示该问题的有效 CodePen：http://codepen.io/dahdah/pen/qbePZK

JavaScript:

$(document).ready(function() {

  /* global FastClick */
  $(function() {
    FastClick.attach(document.body);
  });

  $('#filetype').selectmenu({
    width: '100%'
  });

  // Fix for FastClick breaking jQuery UI on mobile
  $('body').bind('DOMNodeInserted', function() {
    $(this).find('.ui-menu-item').addClass('needsclick');
  });

});

HTML:

<select id="filetype">
  <option selected=**strong text**"">Filetype</option>
  <option value="doc">DOC</option>
  <option value="pdf">PDF</option>
  <option value="html">HTML</option>
</select>

Answer 1

所以经过更多的研究，事实证明“jQuery does not get involved with node insertion events". A suggestion would be to try DOM MutationOberserver，但是对于一些应该快速和简单的事情来说，这是一个巨大的挑战。

我解决了我的问题，方法是监听 jQuery UI 创建的替换原生元素（如 <select> 的元素，然后将 .needsclick 添加到插入的列表项：

$('.ui-widget').on('click', function(e) {
  $('.ui-menu-item').addClass('needsclick');
});

需要这样做，因为列表项仅在单击 .ui-widget 后创建。

FastClick 干扰 jQuery UI 触摸选择菜单

FastClick interfering with jQuery UI Selectmenu on touch

jquery-ui

touch

fastclick.js