Question

将Applied DataTable（jquery.dataTables.min.js）应用于现有表，以便对该表进行分页和排序：

$( '#news_table' ).DataTable( {
    "order": [[ 5, "asc" ]],
    "lengthMenu": [5, 10, 20],
} );

表格的第一页上一切顺利。更改页面时，某些JQuery脚本停止正常工作。所以，有相关的代码块：

<td>
    <a href="#myModal" class="editNews" role="button" data-toggle="modal" data-id="${news.id}">                         
        <img src="resources/img/edit.png"></img>
    </a>
</td>

通过单击图像（edit.png），将出现模态窗口。下一部分将模态转换为编辑风格。

$( '.editNews' ).click(function(e) {                
    e.preventDefault();

    $( '#deleteNews' ).removeClass( 'notShow' );

    var dataId = $( this ).attr( 'data-id' );

    $( '#resetNews' ).addClass( 'notShow' );                

    $.ajax({                                 
        type: "GET",
        dataType: "json",
        url: "admin/update/" + dataId,

        success: function( response ) {                     
            console.log( response );

            $( '#myModalLabel' ).html( "Edit post with id:<span style='color: rgb(255, 0, 0);'>" + response.id + "</span>" );

            $( '#newsId' ).text( response.id );
            $( '#incomingDate' ).text( response.incomingDate );
            $( '#changeDate' ).text( response.changeDate );
            $( '#messageTitle' ).val( response.title );

            $( 'div#messageStatus button' ).each(function( index ) {
                if ( response.messageStatus == index + 1) {
                    $( this ).addClass( 'active' );
                }                           
            });

            $( '.note-editable' ).html( response.message );
            $( '#messageOrder' ).text( response.messageOrder );

            $( '#myModal' ).modal( 'show' );
        },
        complete:function() {
        }
    });

    return false;
});

我的意思是，除了第一个模态窗口之外的任何页面上的链接（edit.png）上的点击仍然会出现，但是它将是空的，所以看起来就像错过的脚本。我试图搞清楚，但卡住了。

还有一些其他脚本也停止了正常运作。

感谢您的任何建议。

下面的图片说明了这种情况：

Normal work on the first page Second page

Answer 1

嗨，这是一个非常常见的问题，你使用jQuery代码一次（在我准备好的DOM上）。

当您再次单击分页表时，新元素不会绑定到您的jQuery代码。

你必须1）在每个ajax请求之后运行jQuery代码可能使用ajax complete：function（）{//把我放在这里...... 或2）使用jQuery“on”

$( "body" ).on( "click", ".editNews", function() {
 //put your code here
});

奇怪的JQuery脚本行为

1 个答案: