我正在开发一个自定义插件,以便在我的网页上使用。该插件用于对 html 表格进行分页、排序、搜索和启用选择。我已经完成了它的基础知识,但是其中大部分只需要重新格式化以提高速度..
但我的问题是,更改页面后,我无法与表格交互。
我与表格交互的代码是:
$.fn.tableManipulation = function( objOptions ) {
return this.each( function() {
var tm = new $.tableManipulation( objOptions ) ;
// page controls
$( "td#btnNext" ).click( function( event ) {
objOptions = tm.changePage( "next" ) ;
} ) ;
$( "td#btnPrev" ).click( function( event ) {
objOptions = tm.changePage( "previous" ) ;
} ) ;
// search controls
$( "button#searchSubmit" ).click( function( event ) {
tm.searchTable() ;
} ) ;
// sort controls
$( "TD[id*='sortColumn']" ).click( function( event ) {
tm.sortColumns( parseInt( this.id.match( /\d+/g ), 10 ) ) ;
} ) ;
// sort selection
$( "TR[id*='row']" ).click( function( event ) {
tm.setSelection( $(this) ) ;
} ) ;
} ) ;
} ;
谢谢
最佳答案
您可以使用 on
的延迟版本(应用于文档,带有选择器)而不是 click
,这样事件就不会分离:
// page controls
$(document).on("click", "td#btnNext", function( event ) {
alert("next");
objOptions = tm.changePage( "next" ) ;
} ) ;
问题的原因是您正在重新创建事件附加到的元素,但并不总是将事件重新连接到新元素(旧元素不再存在)。如果名称/ID 不会更改,则更容易在更高级别监听这些事件(例如 document
,但它可以是层次结构中不更改的任何元素)。
关于javascript - jQuery 插件只运行一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21018487/