我在混合关联两个 JavaScript 函数时遇到问题。
我有一个可使用 tablesorter Jquery 插件排序的表。 在表头内,我有一个“刷新”按钮来更新 Ajax 中的内容表。
问题是排序事件似乎阻止了点击事件,我不知道如何解决这个问题。
编辑:我希望在更新表格时对表格编号进行排序
这是我的表格布局:
<table class="container-content" align="center" id="tableUserByAppli">
<thead>
<tr class="container-title">
<th>
<button id="btnAppli">
<img width="16" alt="reload" src="img/refresh-icon.png">
</button>
Application
</th>
<th>
Users
</th>
</tr>
</thead>
</table>
和Js代码:
$(function()
{
$("#btnAppli").click(function()
{
ajaxUpdateUsersByAppli;
});
// dynamically set table to sortable (tablesorter)
$("table").addClass("tablesorter");
$("table").tablesorter({
sortReset : true
});
});
一个 JSFiddle 来运行我的问题:http://jsfiddle.net/33rrd/
最佳答案
共享演示 ( updated demo ) 中有两个问题需要解决。
首先,要忽略按钮点击,请将标题标题包装在 div 中,然后使用 selectorSort
option 定位它们。
HTML
<th>
<button id="btnAppli">
Update
</button>
<div class="title">Application</div>
</th>
CSS(重新定位按钮)
th button {
float: left;
}
脚本
$("table").tablesorter({
sortReset : true,
selectorSort: '.title'
});
其次,表头在插件内重建,因此任何事件绑定(bind)都需要委托(delegate):
$("table").on("click", "#btnAppli", function(){
alert("test");
//ajaxUpdateUsersByAppli;
});
关于javascript - 单击按钮时阻止 Javascript 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22297510/