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

我试图在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;
           }
        }

任何洞察力？

8332

2017-11-25 03:13

起源

答案:

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

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

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

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

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

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

看一下 jQuery doco for .on() 了解更多信息。

或者，如果您使用的是早于1.7的jQuery版本，则可以使用 `.delegate（）”

2017-11-25 03:42

标记正确，因为信息非常全面。如果包括尼古拉的live（），那将是完美的。 - Anderson Karu

谢谢。我没有提到 .live() 因为 .delegate() 是一个更好的选择，除非你仍然使用版本<1.4.2，但我猜1.4.2不到两年前，所以早期版本可能仍在使用。哦，现在已经提到...... - nnnnnn

+1，晴朗的日子：D - mamdouh alramadan

答案:

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

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

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

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

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

看一下 jQuery doco for .on() 了解更多信息。

或者，如果您使用的是早于1.7的jQuery版本，则可以使用 `.delegate（）”

2017-11-25 03:42

标记正确，因为信息非常全面。如果包括尼古拉的live（），那将是完美的。 - Anderson Karu

+1，晴朗的日子：D - mamdouh alramadan

如果你使用jquery <1.7，你应该使用代表（）或者生活（）

    $(".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所建议的那样

2017-11-25 11:55

+1表示jquery的live（）<1.7。 - Anderson Karu

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

答案:

答案:

热门问题

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