Question

主页：

<div id='leftColumn'>
    <input id="showCamsBtn" type="submit" value="Cameras">
    <input id='showRoomBtn' type='submit' value='/*room name populated by SQL query*/'>
</div>

<div id='subPage'>
    <h1> Welcome to the main page!</h1>
</div>

jQuery的：

$( '#showCamsBtn' ).click( function() {
    $( '#subPageHome' ).delay( 0 ).slideUp( 500 , 'swing' ,
        function() {
            $(this).delay( 600 ).load( 'telecameras.php #subPageCam' ,
                function() {
                    $('#camsTable').DataTable( {
                        "info":             false              ,
                        "scrollCollapse":   true               ,
                        "dom":              '<"wrapper"flipt>' ,
                        "pagingType":       "full"     ,
                        dom:                'T<"clear">lfrtip' ,
                        tableTools: {
                            "aButtons" : [ "copy" , "print" ]
                        }
                    } ) ;
                } ).hide().delay( 600 ).slideDown( 2000 , 'linear' ) ;

            } ) ;
        } ) ;

更新了基本小提琴

http://jsfiddle.net/ETHER34L/mts2bcdg/1/

当我点击#showCamsBtn时，会从telecameras.php加载一个表格，并且dataTables（根据我上面的代码）完全应用。

但是，如果我点击左栏第二个按钮列表中的一个房间按钮，然后再次单击相机按钮，telecamera.php中的信息仍然可以正常加载，但不应用dataTables。如果我刷新页面然后再次单击相机按钮则可以正常工作。我错过了什么？

Answer 1

我终于明白了。这是一个新手的错误，但却是一个重要的错误。

我的IDE将我的.load文件的head部分折叠了，所以我没有看到click事件在主页面上覆盖了我的脚本源，而且有些不同。当我相应地改变一切时，功能开始完美运行。

我还稍微修改了我的代码

$( '#showCamsBtn' ).click( function() {

到

$( ' #showCamsBtn' ).on( 'click' , function() {

Answer 2

您是否尝试过强制更新？使用fnDraw();或fnStandingRedraw()？

像：

$( '#showCamsBtn' ).click( function() {
    $( '#subPageHome' ).delay( 0 ).slideUp( 500 , 'swing' ,
        function() {
            $(this).delay( 600 ).load( 'telecameras.php #subPageCam' ,
                function() {
                    oTable = $('#camsTable').DataTable( {
                        "info":             false              ,
                        "scrollCollapse":   true               ,
                        "dom":              '<"wrapper"flipt>' ,
                        "pagingType":       "full"     ,
                        dom:                'T<"clear">lfrtip' ,
                        tableTools: {
                            "aButtons" : [ "copy" , "print" ]
                        }
                    } ) ;
                    oTable.fnDraw();
                } ).hide().delay( 600 ).slideDown( 2000 , 'linear' ) ;              
            } ) ;
} ) ;

dataTables.js在第一次.click事件后中断

2 个答案: