从可折叠标头内的按钮调用函数而不展开

Question

我得到了一个可折叠的集合，里面有一些可折叠的物品。每个可折叠物品喊叫都有几个带有 onclick 事件的按钮：

    <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;
}

onclick 事件应调用具有一个或多个参数的函数。事件运行良好，但在事件之后，列表视图项折叠。这不应该发生！

如何中断崩溃？

问候

Answer 1

像

onclick=...这样的内联JavaScript不应该与jQuery Mobile一起使用。若要防止此问题，必须将单击事件绑定到按钮并防止传播到情人级别。

下面是一个工作jsFiddle示例：http://jsfiddle.net/Gajotres/z3hsb/

代码示例：

$(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();           
    });
});

如果您想了解有关此主题的更多信息以及更多内容，请查看本文，为了更加透明，这是我的个人博客。或者可以在这里找到。还有一件事，在我的文章中，我已经说过开发人员不应该使用 bind/live/delegate 来绑定事件，但在这里我们必须使用 bind 因为它的工作方式/与data-role="collapsible-set"交互的方式，函数live和on在这里不起作用。

Answer 2

您的函数返回 false，但它不是从其调用方返回的。

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

尝试将 Return 语句添加到"标记"按钮中。