Inserisci pulsanti su DataTable Le celle non funzionano

Question

Sto tentando di inserire i pulsanti in JQuery DataTables ma sembra che quando si preme il pulsante, non accade nulla.

il codice come segue (per la 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 funzione approveButton come segue:

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

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

Qualsiasi Insight?

Answer 1

Se si assegna il gestore con $(".approveButton").click(...) essa si applica solo agli elementi che già esistono, che corrispondono al selettore di ".approveButton" in quel momento. Cioè, gli elementi creati in seguito non riceveranno automaticamente i gestori. Sto assumendo che questo è il problema - se non è possibile ignorare le seguenti ...

Fortunatamente c'è un meccanismo per la creazione di un gestore che funzionerà automaticamente su elementi che vengono creati in futuro corrispondenza:

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

si noti che il selettore iniziale è document - questo funzionerà, ma si dovrebbe impostarlo su un elemento genitore più vicino ai vostri pulsanti, se è possibile, quindi forse il seguente:

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

(io sono non sono sicuro se "#esempio" è il genitore più adatto per questo scopo, ma non mostrare nessuno del tuo codice HTML, quindi ...)

Dai un'occhiata a the jQuery doco for .on() per ulteriori informazioni.

Oppure, se si sta utilizzando una versione di jQuery di età superiore a 1.7 è possibile utilizzare `.delegate()'

Answer 2

Se si utilizza jQuery < 1.7 si deve usare delegate() o dal 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; 
     } 
    } 

altrimenti utilizzare on() come suggerito da nnnnnn