Question

我正在开发一个动态列表或表格工具。表本身是由PHP根据存储在数据库中的数据创建的。如果用户单击列标题，它会对表进行排序（或更改排序顺序），并且每列都有一个过滤器输入字段。如果用户在过滤器具有焦点或单击列标题时按下“enter”键，则整个表将通过ajax更新。当我收到新内容时，我用新的替换整个旧表：

$('#list-ui-table\\['+unique+'\\]').replaceWith(response.result.list_ui_output);

这就是问题所在。如果我使用：

$("[id^='list-ui-header-cell\\[']").click(sortTable);
$("input[name^='list-ui-filter']").keypress(applyFilters);

它第一次正常工作，因为当我使用replaceWith时，新表的控制器将没有'click'和'keypress'事件绑定。我想出将事件处理程序全局绑定到每个presend和future控制器，我必须使用.on方法：

 // ASSIGN ENTER KEYPRESS ON FILTER INPUTS
 // .on makes sure that the handler will be applied for every present and future filter inputs.
 $(document).on('keypress', "input[name^='list-ui-filter']", applyFilters);

 // ASSIGN SORTING FUNCTION TO HEADER CELLS
 $(document).on('click', "[id^='list-ui-header-cell\\[']", sortTable);

这很好用，但我有一个功能可以在新的浏览器选项卡中打开表格，它可以在整个屏幕上显示整个浏览器窗口。重现表所需的所有数据都经过编码并在URL中传递。例如：

<a href="http://localhost/lmvc_trunk/pages/listUIFullscreen/vVNNSwMxEP0rknNhtwiV7k0EQVCESk-uLDGZauxssmYmVi397062W62epKC3l_l472UyWSvrqEP9BrYxAVPrSVW3qtMP0LBjBDXaHiIs0Pnl7pgi7iCx5kTqbqQ0Ok0gBOt9gkqd1akswbY_uSp1BT7nFqYLno96DNOXfZFKzWeXP6QqdY1W49EN9w1jib2rzUgtHDLEfAExw_oes5e-UwjQtY6ztQGMy5ESviiwlF4KkZsQLcRc04Pm_m1oH65rXQTDLngJazJZMpHUfdM1cpMYECUuA-2HAXarLGoPIEg9MndVXdQFBqPxMRALbF8IZGYx-WVdZFWqi9xZF5Wz_QSibnu-fB6MCdqIDQsIDIdpbHt_o7Ib_1omDfiZHcK5wgBik9_2awkyy2G2WDuk3_jaX7b_kPrc3z8VywtNzfA9h4y0oSOeX5wnRDIRwAtH8u455Y82nkzLycnxVGIr521YgVAuNBLI53zSr00XgwGSXf_iG0KXPe2pFM1AyIjV5gM." target="_blank">

在新选项卡上，我包含了再次实现键绑定的javascript文件。似乎新选项卡从父级继承了click和keypress事件处理程序，并且它们再次绑定，因为如果我尝试对表进行排序或过滤，我会看到两个ajax请求和响应，并调用applyFilters和sortTable函数两次。当然这是非常不受欢迎的。我试图首先取消绑定事件处理程序，但它没有用。任何想法？

Answer 1

您可以使用<div>围绕输入，而不是使用文档，并按如下方式给出div ID：

$("#divID").on('keypress', "input[name^='list-ui-filter']", applyFilters);

与其他人一样。

我有同样的问题，它对我有用，希望这也适合你！

JQuery click事件多次触发

1 个答案: