如何防止手风琴标题上的点击事件传播？

Question

我有一个jquery可排序插件的问题.实际上,我有使用手风琴和可排序的物品(问题).

我使用sortable的update事件来显示每个问题手风琴的额外内容.

但我的问题是,在对问题进行排序后,我移动的手风琴会自动打开.

这是一个简单的例子,它重现了这个问题:http://jsfiddle.net/JwzH2/1/

尝试对问题进行排序,你会看到手风琴打开(有时它可能正常工作,所以再试一次).

有人知道如何解决它吗？

编辑:Fosco给了我一个部分工作的解决方案,但仍有一个问题=>它不适用于动态添加元素(请参阅我对他的答案的评论).

此外,我仍然惊讶地看到代码在没有这条线的情况下工作: $('.hidden-content', question).show();.实际上,无论有没有这条线,事件传播应该是相同的

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

Answer 1

我相信你的答案在于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/