向数据表单元格插入按钮失败

Insert Buttons to DataTables Cells fail to work

本文关键字：按钮 失败 插入 单元格 数据表      更新时间：2023-09-26

我试图将按钮插入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;
           }
        }

见解吗?

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

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

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

注意，初始选择器是document -这将工作，但你应该设置它的父元素更接近你的按钮，如果你可以，所以也许如下:

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

(我不确定"#example"是否适合此目的，但您不显示任何HTML，所以…)

查看.on()的jQuery文档获取更多信息。

或者，如果你使用的是低于1.7的jQuery版本，你可以使用' .delegate()'

如果你使用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()
相关文章：