Question

我在尝试使用jQuery UI Selectmenu时实施FastClick。点击selecmenu下拉列表中的一个条目不会在触摸时注册，关闭列表而不实际选择所点击的列表项。为了解决这个问题，我使用bind()在创建jQuery UI元素时将类.needsclick添加到jQuery UI元素中（如this answer中所推荐的那样）。这应该确保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

经过一些更多的研究，结果证明＆＃34; jQuery does not get involved with node insertion events＆＃34;。一个建议是尝试DOM MutationOberserver，但是这样可以快速而简单地打开一大堆蠕虫。

我通过侦听jQuery UI创建的元素点击来解决我的问题，以替换<select>等原生元素，然后将.needsclick添加到插入的列表项中：

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

需要以这种方式完成，因为列表项仅在单击.ui-widget后创建。

FastClick在触摸时干扰jQuery UI Selectmenu

1 个答案: