将按钮插入数据表单元格无法正常工作答案

【问题标题】：Insert Buttons to DataTables Cells fail to work将按钮插入数据表单元格无法正常工作
【发布时间】：2011-11-25 03:13:06
【问题描述】：

我正在尝试将按钮插入到 JQuery 数据表中，但似乎按下按钮时，什么都没有发生。

代码如下（针对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;
           }
        }

有什么见解吗？

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

如果您使用$(".approveButton").click(...) 分配处理程序，它将仅适用于当时已存在的与".approveButton" 选择器匹配的元素。也就是说，稍后创建的元素不会自动获取它们自己的处理程序。我假设这就是问题所在 - 如果不是，您可以忽略以下内容...

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

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

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

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

（我不确定“#example”是否是最适合此目的的父级，但您没有显示任何 HTML，所以...）

查看the jQuery doco for .on() 了解更多信息。

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

【讨论】：

标记为正确，因为信息非常全面。如果包含 Nicola 的 live() ，那就完美了。
谢谢。我没有提到.live()，因为.delegate() 是一个更好的选择，除非您仍然使用

【解决方案2】：

如果你使用 jquery delegate() 或 live()

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

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

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

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

否则按照 nnnnnn 的建议使用 on()

【讨论】：