Вставка кнопок в таблицы данных Не работают

Я пытаюсь вставить кнопки в 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").click(function() {
            alert(this.name);

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

Любая проницательность?

Ответы

Ответ 1

Если вы назначаете обработчик с $(".approveButton").click(...), он будет применяться только к уже существующим элементам, которые в данный момент соответствуют селектору ".approveButton". То есть, элементы, созданные позже, автоматически не получат собственных обработчиков. Я предполагаю, что это проблема - если не вы можете игнорировать следующее...

К счастью, существует механизм создания обработчика, который будет автоматически работать с соответствующими элементами, которые создаются в будущем:

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

Обратите внимание, что начальный селектор document - это будет работать, но вы должны установить его на родительском элементе ближе к вашим кнопкам, если возможно, так что, возможно, следующее:

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

(Я не уверен, что "#пример" является наиболее подходящим родителем для этой цели, но вы не показываете какой-либо ваш HTML-код, поэтому...)

Посмотрите jQuery doco для .on() для получения дополнительной информации.

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

Ответ 2

Если вы используете jquery < 1.7 вы должны использовать 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;
       }
    }

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