Insertar botones en DataTables Las celdas no funcionan

Question

Estoy tratando de insertar botones en las tablas de datos de JQuery, pero parece que cuando se presiona el botón, no pasa nada.

el código como sigue (para el 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%" 
        } 
       ] 
      }); 

La función approveButton como sigue:

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

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

Cualquier Insight?

Answer 1

Si asigna el controlador con $(".approveButton").click(...), solo se aplicará a los elementos que ya existen que coincidan con el selector ".approveButton" en ese momento. Es decir, los elementos creados más adelante no obtendrán automáticamente manejadores propios. Estoy asumiendo que ese es el problema - si no se puede pasar por alto el siguiente ...

Afortunadamente, existe un mecanismo para crear un controlador que funcione de forma automática en los elementos que se crean en el futuro a juego:

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

en cuenta que el selector inicial es document - esto funciona, pero debe configurarlo en un elemento padre más cerca de sus botones si es posible, por lo que tal vez el siguiente:

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

(estoy no estoy seguro si "#example" es el padre más apropiado para este propósito, pero no muestra ninguno de sus HTML, así que ...)

Eche un vistazo a the jQuery doco for .on() para obtener más información.

O, si está utilizando una versión de jQuery mayor que 1,7 se puede utilizar `.delegate()'

Answer 2

Si utiliza jQuery 1.7 < se debe utilizar delegate() o en vivo()

$(".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; 
     } 
    } 

utilizar de otro modo on() según lo sugerido por nnnnnn