Geek asks and answers

How to prevent the click event from spreading on the accordion title?

I have a problem with jQuery sortable plugin. Indeed, I have items (questions) that use both the accordion and the sortable ones.

I am using the update sortable event to display additional content in each accordion of a question.

But my problem is that after sorting the questions, the accordion of the one I moved automatically opens.

Here is a simple example that reproduces the problem: http://jsfiddle.net/JwzH2/1/

Try sorting the questions and you will see the opening of the accordion yourself (sometimes this may not work correctly, so try again).

Does anyone have an idea how to fix it?

EDIT: Fosco gave me a partially working solution, but there is still a problem => it does not work with dynamically added elements (see my comments on his answer).

In addition, I am still surprised that the code works without this line: $('.hidden-content', question).show(); . In fact, the event propagation must be the same with and without this line

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

+3
source share
1 answer

I believe your answer lies here in the sample code from 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>

Pay attention to the use of the variable stopand the way it is captured and controlled by both the sorting mechanism and the click handler.

: , , . , . . , , . : http://jsfiddle.net/JwzH2/41/

+8

More articles:


All Articles