沒有發射

這裏動態生成的摺疊按鈕事件是說明問題的一些的jsfiddle測試：沒有發射

我做更多的測試和這個問題似乎是唯一的尤其是動態生成的可摺疊頭內的元素。

var input = content.find('input');  
input.on('click', function(e) { 
    alert('this works as expected'); 
    e.stopPropagation(); 
    e.stopImmediatePropagation();  
}); 


$(document).on('click', 'input', function(e) { 
    alert('this doesnt work???'); 
    e.stopPropagation(); 
    e.stopImmediatePropagation();  
});

一個簡單的方法，以確認這是不是動態生成的可摺疊的具體工作，在報頭中：

$(document).on('click', '*', function(e) { 
     alert('will work anywhere except in dynamically generated collapsible header!'); 
});

來源

2014-12-01 user3044258

它不起作用，因爲它不工作的處理程序有stopPropagation ，這會阻止事件冒泡到document。

你有3個解決方案：

添加你當前的事件，其工作
取出單擊處理程序，在目前的工作需要的代碼和移動代碼到你的委託事件處理程序。
從第一個點擊處理程序中刪除stopPropagation。

就我個人而言，我會建議方法2，因爲將只有1個點擊處理程序需要覆蓋所有可能添加到DOM的input元素。

來源

2014-12-01 18:22:58

你能否詳細說明2如果可能？我在執行過程中並不完全清楚。謝謝 – user3044258 2014-12-01 18:36:17

我試了你的建議，但除非我誤解，它仍然無法正常工作。 – user3044258 2014-12-01 18:43:36

如果我刪除了可以工作的代碼（或者刪除stopPropogation等），它仍然不起作用。現在我會堅持使用可用的事件處理程序，並在稍後查看是否有解決方法。這個問題似乎與它動態生成的事實有關，它在可摺疊標題內部，因爲對於可摺疊正文/內容中的任何元素，委託事件處理程序在那裏工作得很好。 – user3044258 2014-12-01 18:55:42

在jquery.mobile-1.4.4.js可摺疊的東西click事件看起來是這樣的（行6854）：

"click": function(event) { 
       this._handleExpandCollapse(!ui.heading.hasClass("ui-collapsible-heading-collapsed")); 
       event.preventDefault(); 
       event.stopPropagation(); 
      }

還有一個stopPropagation防止你的「第二」事件燒製而成。（事件附加到輸入元素的父元素）

您的「第一個」事件在可摺疊事件之前觸發，所以沒有問題。

來源

2014-12-01 19:07:06 haul

是的，這是正確的，我也看過jquery移動代碼，但我認爲這不會解決任何問題。你可以看到在非動態生成的項目上，它工作得很好。我不確定你的評論是如何解決的，也許我只是需要更多的睡眠:) – user3044258 2014-12-01 19:46:48

回答

相關問題