Question

我在混合关联两个JavaScript函数时遇到了问题。

我有一个表可以使用tablesorter Jquery插件进行排序。在我的表头中，我有一个“刷新”按钮来更新Ajax中的内容表。

问题是sort事件似乎阻止了click事件，我不知道如何修复它。

编辑：我希望在更新表格时对表格进行排序

这是我的表格布局：

<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'
});

其次，表头是在插件中重建的，因此需要委派任何事件绑定：

$("table").on("click", "#btnAppli", function(){
    alert("test");
    //ajaxUpdateUsersByAppli;
});

Answer 2

我认为你的代码没问题，只需删除返回false;正如Pratik所建议的那样，如果你在按钮点击的响应中返回false，那么你在click事件中做的任何计算都将是无用的。

Answer 3

http://jsfiddle.net/nsq2k/

您需要将参数e（事件的简称）添加到函数中，然后调用e.preventDefault()。检查我上面的分叉小提琴。

Answer 4

尝试这项工作：

$(function()
{


    // dynamically set table to sortable (tablesorter)
    $("table").addClass("tablesorter");
    $("table").tablesorter({
        sortReset : true
    });
});
$("#btnAppli").click(function(e)
    {

       alert("test");

        //ajaxUpdateUsersByAppli;
    });

Answer 5

我刚遇到同样的问题，即阻止在ajax加载期间执行排序脚本......但是我可以捕获click事件。

这是我在查看tablesorter代码后找到的脏解决方案。将表的isUpdating属性设置为[true]将阻止排序发生。

document.getElementById（“table”）。isUpdating = true;

不要忘记将它设置回[false]进入你的回调ajax事件......

单击按钮时阻止Javascript事件

5 个答案: