jQuery手機按鈕裏面可摺疊的標頭

我真的很感激，如果有人可以幫助我。我正在嘗試使用jQuery mobile 1.2 Beta（使用jQuery 1.7.1）動態構建可摺疊塊。jQuery手機按鈕裏面可摺疊的標頭

現在我有一個問題，我想要一個可摺疊標題中的按鈕，並且所有工作都正常，但是當我點擊按鈕時，我設置的點擊事件不會被解僱，而是塊取消折疊或摺疊。

$('#main').append('<div data-role="collapsible" data-theme="c" data-content-theme="c" id="pflicht_' 
+ identifier + '" pflichtID="' + val.guid + '">' + 
'<h3 style="white-space: normal;" id="inner_header_' + identifier + '">' 
+ header + ': ' + val.pflichtBezeichnung + ' (' + val.Intervall + ' - ' + val.IntModus + ') ' 
+ val.pflichtNummer + '.' + val.pflichtZusatz + 
'<button type="button" data-inline="true" id="ok" pflichtID="' 
+ val.guid + '" identifier="' + identifier + '" >Ok</button></h3>' + 
'</div>' 

$("#ok").live('click', function() { 
        alert("ok"); 
       });

我需要做些什麼來獲得按鈕的點擊事件？

感謝您的幫助！

來源

2012-09-14 smatyas

你能格式化你的代碼位，它會變得清晰，更容易檢查：？d –

很抱歉給您帶來不便，希望這是現在好了...... – smatyas

首先，您應該認識到.live已被棄用，轉而使用on。

這就是爲了理解這裏發生了什麼，您需要了解事件代理團隊的工作原理，特別是當您使用事件代理將事件綁定到DOM中的更高級別（某些父元素）時因爲事件冒泡你檢查起始事件，看看它是否與指定的選擇器匹配。

的.live方法通過事件綁定到document（所以它總是綁定到父元素），然後當事件冒泡到它檢查以查看它是否指定的選擇相匹配的document。在你的情況下的問題是，某事（可能是collapisple標題）正在吞噬click事件，以便它永遠不會到達文檔。

該解決方案非常簡單，可以直接綁定到按鈕，也可以委託給DOM中的較低級別，在事件到達的某個位置。

例如

$('#inner_header_' + identifier).on('click', '#ok', function(e) { 
    alert('ok'); 
});

如果你不想標題展開和摺疊，當你點擊按鈕，就阻止進一步向上冒泡，您可以使用stopPropagation()方法

做事件

例如

$('#inner_header_' + identifier).on('click', '#ok', function(e) { 
    alert('ok'); 
    e.stopPropagation() 
});

來源

2012-09-14 14:12:42 Jack

非常感謝您的回答，您的第一個建議很好，除了塊被擴展...如果使用e.stopPropagation（），那麼我會回到我的登錄屏幕......但這可能有一些事情要做，我正在使用MVC ASP.NET與jQuery Mobile結合...我不確定 – smatyas

e.preventDefault（）;結合e.stopPropagation（）做了訣竅:) ...再次感謝您的幫助！ – smatyas

很高興爲你效力，我打算建議使用[stopImmediatePropagation（）]（http://api.jquery.com/event.stopImmediatePropagation/）代替。無論如何，您可以通過勾選答案左側的複選標記來接受答案。 – Jack

jQuery手機按鈕裏面可摺疊的標頭

回答

相關問題