奇怪的 JQuery 脚本行为

Question

将数据表 (jquery.dataTables.min.js) 应用到现有的 table，因此对 table 进行分页和排序：

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

table 第一页一切顺利。某些 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) 模态 window 出现。下一部分将模式转换为编辑风格。

$( '.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;
});

我的意思是，在除第一个模态 window 之外的任何页面上点击 link (edit.png) 仍然会出现，但会是空的，所以看起来像脚本刚刚错过。我试图弄明白，但卡住了。

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

感谢您的建议。

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

Answer 1

嗨，这是一个很常见的问题，您使用了一次 jQuery 代码（我想 DOM 准备好了）。

当您单击分页时 table 会再次生成并且新元素不会绑定到您的 jQuery 代码。

你必须在每个 ajax 请求之后 1) 运行 jQuery 代码可能使用 ajax complete:function() {//把我放在这里。 .. 或 2) 使用 jQuery "on"

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

奇怪的 JQuery 脚本行为

Weird JQuery scripts behavior

javascript

datatable

jquery