2

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

我怎样才能中断崩溃？

问候

4

2 回答 2

2

内联 javascript 之类的 onclick=...不应与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不会在这里工作。

于 2013-02-01T11:41:55.563 回答
1

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

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

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

于 2013-02-01T11:17:16.680 回答