从可折叠标头内的按钮调用函数而不展开
Call a function from a button inside a collapsible header without unfold
我得到了一个可折叠的集合,里面有一些可折叠的物品。每个可折叠物品喊叫都有几个带有 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 事件应调用具有一个或多个参数的函数。事件运行良好,但在事件之后,列表视图项折叠。这不应该发生!
如何中断崩溃?
问候
像
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
在这里不起作用。
您的函数返回 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 语句添加到"标记"按钮中。
相关文章:
- 是否可以将一个函数输入连接到另一个函数调用的文本
- 在输入字段上有两个函数调用,一个在Blur上,一个不在Angular中
- 如何在Javascript函数调用中循环变量
- Javascript:应为赋值或函数调用,但实际看到的却是表达式
- 如何远程检查JavaScript应用程序的函数调用堆栈
- javascript函数调用不起作用
- 为什么这个函数调用会破坏程序并导致未定义的变量
- 如何通过函数调用设置图像的src
- 从全局函数调用Ember控制器上的方法
- 为什么Jquery$.ajax在函数调用中触发所有statusCode,即使调用成功
- JavaScript函数调用(arg1)(arg2)
- 打印链接时,将javascript函数调用到链接中
- 在函数调用中封装数据除了隐藏数据之外还有什么优点
- 无法从JavaScript中的函数调用对象属性
- 对中的函数调用进行排序是回调的唯一方法
- 函数调用方法有什么用
- Javascript:JSHint:应为赋值或函数调用,但实际看到的却是表达式
- HTML5(Bootstrap)通过函数调用运行动画
- 函数调用不起作用
- 函数中的Javascript函数调用