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/jquery/event_delegate.asp
http://blog.sina/s/blog_7821c9650101epx9.html
http://blog.csdn/qq_26747571/article/details/52086646