Question

I got a collapsible-set with a few collapsible-items. Every collapsible-item shout have a few buttons with an onclick event:

    <div id="List" data-role="collapsible-set" data-theme="b" data-content-theme="d">
    <div id='ListItem' data-role='collapsible' data-content-theme='b' data-collapsed='false'>
        <h3>Title
            <div style='float:right;'>
                <input type='button'  data-theme='b' value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' onclick='test(43);'/>
                <input type='button' value='Delete' data-theme='b' data-mini='true' data-inline='true' data-icon='delete' onclick='test(45);' class='splitButtonClicked'/>
            </div>
        </h3>
        CONTENT
    </div>
</div>


function test(value){
    alert(value);
    return false;
}

The onclick event should call a function with one or more parameters. The event works well, but after the event the listview item collapse. This should not happen!

How can I interrupt the collapse?

Regards

Answer 1

Inline javascript like onclick=... should not be used with jQuery Mobile. To prevent this problem click event must be bound to the button and prevented from propagation to lover levels.

Here’s a working jsFiddle example: http://jsfiddle.net/Gajotres/z3hsb/

Code example:

$(document).on('pagebeforeshow', '#index', function(){    
    $('#first-button').bind('click', function(e) {       
        alert('First button');       
        e.stopPropagation();
        e.stopImmediatePropagation();          
    });    
    $('#second-button').bind('click', function(e) {    
        alert('Second button');   
        e.stopPropagation();
        e.stopImmediatePropagation();           
    });
});

If you want to find out more about this topic and more take a look at this ARTICLE, to be more transparent it is my personal blog. Or it can be found HERE. One more thing, in my article I have stated that developers should not use bind/live/delegate to bind an event, but here we MUST use bind because of a way how it works / interacts with data-role="collapsible-set", functions live and on will not work here.