觸發jQuery中的自定義事件以與live（）一起使用

Question

我已經為jQuery編寫了一系列插件，這些插件實際上充當了移動瀏覽器的事件。 您可以在此處查看它們> http://ben-major.co.uk/2011/11/jquery-mobile-events/ 。

當前，它們由$(ele).tap(handler)等調用，但我想添加功能來觸發自定義事件，以便可以使用$(ele).on('tap', handler); 。

我現在正在使用以下代碼，但這似乎不起作用：

$(function() {
    $('*').tapstart(function() { $(this).trigger('tapstart'); })
          .tapend(function() { $(this).trigger('tapend'); })
          .tap(function() { $(this).trigger('tap'); })
          .doubletap(function() { $(this).trigger('doubletap'); })
          .taphold(function() { $(this).trigger('taphold'); })
          .swipedown(function() { $(this).trigger('swipedown'); })
          .swipeup(function() { $(this).trigger('swipeup'); })
          .swipeleft(function() { $(this).trigger('swipeleft'); })
          .swiperight(function() { $(this).trigger('swiperight'); });
});

這是一個jsFiddle來演示我的問題。 顯然，單擊第二個div應該模仿第一個div的操作，但是由於在解析了上面給出的綁定之后將其添加到DOM中，所以沒有。

我想我的問題是：實現我想要的最好的方法是什么？ 有沒有辦法選擇現在和將來存在於DOM中的所有元素（如果可能的話，我寧願不使用諸如livequery或外部插件之類的東西）。

Answer 1

就您而言，我認為jQuery無法正確處理您的自定義事件（因為自定義事件不會冒泡到文檔中）。 答案是將事件偵聽器的一個分支綁定到document 。 並且不要在這種情況下永遠使用jQuery。

jQuery的實時模式幾乎完成了我建議的操作，但是它將嘗試將event.target與綁定的選擇器（在您的問題中用'*'表示）相匹配，這非常慢（也消耗了手機的電量）。

如果要與元素的某些類型或某些className進行交互，只需自行處理即可，並觸發所需的事件處理程序。

一個例子：

function findAncestorOfType(el, type) {
  while (el && !(el instanceof type))
    el = el.parent;
  return el;
}

document.addEventListener('click', function(evt) {
  var target = findAncestorOfType(evt.target, LIElement);
  if (target) {
    // distinguish event type
    type = 'click';
    callbacks[type](target, evt);
  }
}, false);