2011-06-10 84 views
3

我有一個jQuery排序插件的問題。事實上,我有使用手風琴和可排序的項目(問題)。如何防止手風琴頭上的點擊事件傳播?

我使用可排序的更新事件來顯示每個問題手風琴中的額外內容。

但我的問題是,排序問題後,我移動的手風琴自動打開自己。

舉個簡單的例子重現問題:http://jsfiddle.net/JwzH2/1/

嘗試將問題進行排序,你會看到手風琴開放本身(它可能正常工作,有時,所以再試一次)。

有人對如何解決它有想法嗎?

編輯:福斯科給了我一個部分工作的解決方案,但仍然存在一個問題=>它不適用於動態添加的元素(請參閱我對他的答案的評論)。

此外,我仍然驚訝看到代碼,而這條線的工作:$('.hidden-content', question).show();。事實上,事件傳播應該是相同的使用和不使用此行

http://jsfiddle.net/JwzH2/38/

+2

發生這種情況的原因是,爲了排序您必須單擊...手風琴的點擊處理程序在您放開元素後生效。我每次都會發生......移動一個封閉的,它打開,移動一個開放的,它關閉。 – Fosco 2011-06-10 17:53:31

回答

8

我相信你的問題就出在這裏,從jQuery UI的示例代碼:http://jqueryui.com/demos/accordion/sortable.html

$(function() { 
    var stop = false; 
    $("#accordion h3").click(function(event) { 
     if (stop) { 
      event.stopImmediatePropagation(); 
      event.preventDefault(); 
      stop = false; 
     } 
    }); 
    $("#accordion") 
     .accordion({ 
      header: "> div > h3" 
     }) 
     .sortable({ 
      axis: "y", 
      handle: "h3", 
      stop: function() { 
       stop = true; 
      } 
     }); 
}); 
</script> 

注意使用一個stop變量,以及它如何被排序機制和點擊處理程序捕獲和操作。

編輯:今天早上我花了一點時間玩你的動態內容問題,這就是我想出的。當添加新項目時,我會銷燬並重新設置手風琴和適當的點擊處理程序。我將點擊處理程序設置和手風琴設置移到了函數中,並在初始和添加新項目時調用它們。它發生得很快,我沒有看到任何閃爍或視覺問題,但你的里程可能會有所不同。在這裏試試吧:http://jsfiddle.net/JwzH2/41/

+0

謝謝;)但是你知道爲什麼'活'方法不起作用嗎? '$( 「#accordion H3」).live( '點擊',函數(事件){ 如果(停止){ event.stopImmediatePropagation(); event.preventDefault(); 停止=假; } });' 事實上,我必須動態地添加元素,所以簡單的'click()'方法不適用於'post-dom-loaded'元素 – 2011-06-10 19:00:56

+0

我用'delegate'而不是'live'嘗試過,但它不起作用:http://jsfiddle.net/JwzH2/37/ – 2011-06-10 19:35:22

+0

此外,還有一件事我不明白。爲什麼當我簡單地評論'$('。hidden-content',question).show();'?事件傳播應該是相同的.. – 2011-06-10 19:56:32