javascript - 单击按钮时阻止 Javascript 事件

Question

我在混合关联两个 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/

Answer 1

共享演示 ( 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;
});