触摸时FastClick干扰jQuery UI选择菜单

Question

我正在尝试在使用jQuery UI选择菜单时实现FastClick。点击选择菜单下拉列表中的一个条目不会在触摸时注册，在没有实际选择点击列表项的情况下关闭列表。为了弥补这一点，我使用bind()在创建jQuery UI元素时将类.needsclick添加到jQuery UI元素中(如这个答案中所建议的)。这应该是为了确保FastClick不应用于有问题的元素。

不幸的是，类只在我打开和关闭菜单一次之后才被添加，所以它只能在第二次尝试选择列表项时起作用，即使在加载页面时就插入了元素。如何确保元素在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不涉及节点插入事件。“。一个建议是尝试DOM MutationOberserver，但这将打开一整罐蠕虫的东西，应该是快速和简单的。

我已经通过监听jQuery UI创建的元素的单击来替换本机元素，如<select>，然后将.needsclick添加到插入的列表项中，从而解决了问题：

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

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