Wstawianie przycisków do DataTables Komórki przestają działać

Question

Próbuję wstawić przyciski do JQuery DataTables, ale wydaje się, że po naciśnięciu przycisku nic się nie dzieje.

kodu w następujący sposób (w 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%" 
        } 
       ] 
      }); 

Funkcja approveButton następująco:

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

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

Każdy wgląd?

Answer 1

Jeśli przypiszesz funkcję obsługi za pomocą $(".approveButton").click(...), będzie ona dotyczyć tylko elementów, które już istnieją, w tym momencie odpowiadających selektorowi ".approveButton". Oznacza to, że elementy utworzone później nie otrzymają automatycznie własnych procedur obsługi. Zakładam, że to jest problem - jeśli nie można lekceważyć następujących ...

szczęście istnieje mechanizm tworzenia obsługi, która będzie automatycznie pracować na dopasowanie elementów, które są tworzone w przyszłości:

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

Zauważ, że początkowa selektor jest document - to będzie działać, ale należy go ustawić na elemencie macierzystym bliżej do przycisków jeśli można, więc może co następuje:

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

(jestem nie wiem, czy "#example" to " najbardziej odpowiedni rodzic do tego celu, ale nie wyświetlasz żadnego kodu HTML, więc ...)

Aby uzyskać więcej informacji, zobacz artykuł the jQuery doco for .on().

Lub, jeśli używasz wersji starszej niż 1.7 jQuery można użyć `.delegate()'

Answer 2

Jeśli używasz jQuery < 1.7 należy użyć delegate() lub żyć()

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

inaczej używać on() jak zasugerował nnnnnn