向DataTables插入按钮单元格无法正常工作

Question

我试图在JQuery DataTables中插入按钮,但似乎按下按钮时没有任何反应.

代码如下(对于JQuery Datatable):

            var oTable = $('#example').dataTable( {
                "aaData": movieclips,
                "bProcessing": true,
                "bAutoWidth": false,
                "fnInitComplete": function() {
                                var oSettings = this.fnSettings();
                                for ( var i=0 ; i<oSettings.aoPreSearchCols.length ; i++ ){
                                    if(oSettings.aoPreSearchCols[i].sSearch.length>0){
                                        $("tfoot input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
                                        $("tfoot input")[i].className = "";
                                    }
                                }
                            },
                "aoColumns": [
                    { 
                        "sTitle": "Title", 
                        "sClass": "center",
                        "sWidth": "80%"
                    },
                    { 
                        "sTitle": "Video URL",
                        "sClass": "center",
                        "fnRender": function(obj) {
                            var sReturn = obj.aData[ obj.iDataColumn ];
                            var returnButton = "<input class='approveButton' type='button' name='" + sReturn + "' value='Play'></input>";
                            return returnButton;
                        },
                        "sWidth": "20%"
                    }
                ]
            } );

approveButton函数如下:

        $(".approveButton").click(function() {
            alert(this.name);

           try {
              alert(this.name);
           } finally {
              return false;
           }
        }

任何洞察力？

Answer 1

如果为其分配处理程序,$(".approveButton").click(...)它将仅适用于那时已存在的与".approveButton"选择器匹配的元素.也就是说,稍后创建的元素不会自动获得自己的处理程序.我假设那就是问题 - 如果不是,你可以忽略以下......

幸运的是,有一种机制可以创建一个处理程序,该处理程序将自动处理将来创建的匹配元素:

$(document).on("click", ".approveButton", function() {
   // your function code here
});

请注意,初始选择器是document- 这将起作用,但如果可以的话,您应该在靠近按钮的父元素上进行设置,因此可能如下:

$("#example").on("click", ".approveButton", function() { /* your code */ });

(我不确定"#example"是否是最适合此目的的父级,但是你没有显示任何HTML,所以...)

有关更多信息,请查看jQuery doco.on().

或者,如果您使用的是早于1.7的jQuery版本,则可以使用`.delegate()'