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 一起使用。为防止出现此问题，必须将click事件绑定到该按钮，并防止其传播到情人级别。

这是一个有用的 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" <的交互方式/ strong>，功能 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语句添加到按钮标记处。

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

2 个答案: