javascript - jQuery 插件只运行一次

Question

我正在开发一个自定义插件，以便在我的网页上使用。该插件用于对 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) ) ;
        } ) ;
    } ) ;
} ;

谢谢

Answer 1

您可以使用 on 的延迟版本(应用于文档，带有选择器)而不是 click，这样事件就不会分离:

// page controls
$(document).on("click", "td#btnNext", function( event ) {
    alert("next");
    objOptions = tm.changePage( "next" ) ;
} ) ;

问题的原因是您正在重新创建事件附加到的元素，但并不总是将事件重新连接到新元素(旧元素不再存在)。如果名称/ID 不会更改，则更容易在更高级别监听这些事件(例如 document，但它可以是层次结构中不更改的任何元素)。