bootstrap 中 dataTable 首頁點擊事件可用、下一頁後點擊事件無效

dataTable是很好的用的插件，使用它可以方便快捷的創建簡潔大方的表格，其中分頁有服務器分頁和客戶端分頁，在服務器進行分頁時可以自己寫分頁格式，然後對分頁按鈕設置事件向服務器進行請求數據；但是在客戶端進行分頁時，就要用到dataTable 中的”bPaginate”:true屬性，實現前臺頁面查詢表格數據顯示。但是在我點擊下一頁的時候，不會響應我的jquery的點擊事件。但在點第一頁的時候的可以響應點擊事件。

原因：表格的下一頁數據是動態js生成的。而jquery是在第一次加載頁面的時候加載的。對於jquery來說，下一頁的表格數據就相當於未來的html的標籤數據。所以無法響應點擊事件。

我們用jquery的delegate的方法可以查到是響應未來的標籤的。

 $("body").delegate('#showrule_table .doshow', 
                 'click', function () { });

delegate() 方法爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。
使用 delegate() 方法的事件處理程序適用於當前或未來的元素（比如由腳本創建的新元素）。

語法：

$(selector).delegate(childSelector,event,data,function)

參數 描述：

childSelector 必需。規定要附加事件處理程序的一個或多個子元素。
event 必需。規定附加到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。
data 可選。規定傳遞到函數的額外數據。
function 必需。規定當事件發生時運行的函數。

引入dataTable標籤

<div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <div class="row">
            <div class="col-xs-12">
                <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div><!-- /.span -->
        </div><!-- /.row -->
    </div><!-- /.col -->
</div><!-- /.row -->

通過腳本設置dataTable格式

<script>
jQuery(function($) {
    $("#dynamic-table").dataTable({
        "destroy":true,//消除重定義出錯
        "bPaginate":true,//是否使用分頁
        "bFilter": false, //是否使用搜索
        "sInfo":true,
        "bAutoWidth":false,
        "serverSide": false,
        //"pageList":[20],
        //"pageSize":20,
        "oLanguage":{
            "sInfo": "顯示 _START_ 至 _END_ 條 &nbsp;&nbsp;本頁共 _TOTAL_ 條",
            "oPaginate": {
                "sPrevious": " 上一頁 ",
                "sNext":     " 下一頁 ",
            }

        },
        "aoColumns":[
                        {"data":"goodid","sTitle":"商品編號"},
                        {"data":"goodname","sTitle":"商品名稱"},
                        {"data":"goodprice","sTitle":"單價（元）"},
                        {"data":"qrcode","sTitle":"銷量（件）"},
                        {"data":" ","sTitle":"操作","bSortable":false,
                        "mRender":function(data,type,full){
                            return "<div class='hidden-sm hidden-xs action-buttons'><a id='detail' class='blue' title='查看詳情'><i class='ace-icon fa fa-search-plus bigger-130'></i></a></div>";
                        }}
                    ],
        "aaData":list
    });

    $("body").delegate('#dynamic-table tr a', 'click', function () {
        f = 1;
    });
    $("body").delegate('#dynamic-table tr', 'click', function () {
        var nTds = $("td",this);
        var sBrowser = $(nTds[0]).text();//獲取當前行的第一列數據
        goodid = sBrowser;
        if(f == 1){
            //window.open("./orderdetail.html?orderId="+orderId,"_self");
            window.open("./saleanalysisdetail.html?goodId="+goodid,"_self");
        }
    });

)}
</script>

此時，當我點擊查詢按鈕時，點擊事件正常執行了。

說明：此文爲自己學習記錄，僅作參考，歡迎批評更正。

[參考內容]
http://www.w3school.com.cn/jquery/event_delegate.asp
http://blog.sina.com.cn/s/blog_7821c9650101epx9.html
http://blog.csdn.net/qq_26747571/article/details/52086646