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）侦听这些事件，但它可以是层次结构中不会更改的任何元素。

jQuery插件只运行一次

1 个答案: