Call a function from a button inside a collapsible header without unfold

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

return false to stop event bubbling – David Fregoli Feb 01 '13 at 11:18 — David Fregoli, Feb 01 '13 at 11:18

score 2 · Accepted Answer · edited May 23 '17 at 12:04

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.

Nice, thanks. I tried to add "$('#popup').popup('open');" to the event binding, but of course this does not work because of the stopPropagation and stopImmediatePropagation. Do you know any solution for this? — Stev, Feb 01 '13 at 15:04
Can you update your question with this source, I would like to see what have you done. — Gajotres, Feb 01 '13 at 15:55
I got it. It's the same code you posted. I just add a popup div and "$('#popup').popup('open');" to the bind event. This does not work correctly with input/button. But it work's well with links: [link](http://jsfiddle.net/gRGEN/) — Stev, Feb 01 '13 at 18:39

score 1 · Answer 2 · answered Feb 01 '13 at 11:17

1

Your function is returning false, but it isnt returned from its caller.

<input type='button' value='Delete' data-theme='b' data-mini='true' data-inline='true' data-icon='delete' onclick='return test(45);' class='splitButtonClicked'/>

try adding the return statement to the button mark up.

answered Feb 01 '13 at 11:17

Matthew Cox

13,566
9
54
72

Thanks, but unfortunately this does not work or is not enough. – Stev Feb 01 '13 at 11:22

Call a function from a button inside a collapsible header without unfold

2 Answers2