Вставить кнопки в 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;
           }
        }

Any Insight?

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 для .on() для получения дополнительной информации.

Или, если вы используете версию jQuery старше 1.7, вы можете использовать `.delegate () '

Answer 2

Если вы используете jquery <1.7, вы должны использовать <a href="http://api.jquery.com/delegate/" rel="nofollow"> делегат () или 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;
       }
    }

в противном случае используйте on () , как предложено nnnnnn