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

【问题标题】：Call a function from a button inside a collapsible header without unfold从可折叠标题内的按钮调用函数而不展开
【发布时间】：2013-06-18 17:16:03
【问题描述】：

我有一个带有一些可折叠物品的可折叠套装。每个可折叠项目的呼喊都有几个带有 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 事件应该调用带有一个或多个参数的函数。该事件运行良好，但事件发生后列表视图项目崩溃。这不应该发生！

我怎样才能中断崩溃？

问候

【问题讨论】：

返回 false 以停止事件冒泡

标签： javascript jquery css jquery-mobile event-handling

【解决方案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();           
    });
});

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

【讨论】：

很好，谢谢。我尝试添加“$('#popup').popup('open');”到事件绑定，但由于 stopPropagation 和 stopImmediatePropagation，这当然不起作用。你知道有什么解决办法吗？
你能用这个来源更新你的问题吗，我想看看你做了什么。
我明白了。这与您发布的代码相同。我只是添加了一个弹出 div 和 "$('#popup').popup('open');"绑定事件。这不适用于输入/按钮。但它适用于链接：link

【解决方案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'/>

尝试将返回语句添加到按钮标记。

【讨论】：

谢谢，但不幸的是这不起作用或不够。