데이터 테이블에 단추 삽입 셀이 작동하지 않습니다.

Question

단추를 JQuery DataTables에 삽입하려고하는데 버튼을 누르면 아무 일도 일어나지 않습니다. (JQuery와 데이터 테이블에 대해) 다음과 같이

코드 :

  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; 
      } 
     } 

전혀 알?

Answer 1

$(".approveButton").click(...)과 함께 처리기를 할당하면 해당 시점에 ".approveButton" 선택기와 일치하는 이미 존재하는 요소에만 적용됩니다. 즉, 나중에 생성 된 요소는 자동으로 자체 처리기를 가져 오지 않습니다. 그게 문제가 있으리라 믿고있어 - 당신이 무시할 수없는 경우, 다음 ...

다행히 자동으로 미래에 생성 된 요소와 일치하는 작업을하는 핸들러를 생성하기위한 메커니즘이 있습니다 :

가

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

주의는 초기 선택이 document입니다 - 그래서 아마도 다음이 작동하지만 당신이 할 수있는 경우에 당신은 당신의 버튼에 가까이 부모 요소에를 설정해야합니다 :

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

을 (난 "#example"이 (가) 확실하지 않은 경우 이 목적에 가장 적합한 상위 항목이지만 HTML을 표시하지 않으므로 ...)

자세한 내용은 the jQuery doco for .on()을 참조하십시오.

또는, 1.7보다 이전 버전의 jQuery 버전을 사용하는 경우 당신이 JQuery와 < 1.7을 사용하는 경우 `.delegate()'

Answer 2

을 사용할 수 있습니다 당신이 그렇지 않으면 on()를 사용 delegate()를 사용하거나) (

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

을 살아야한다 nnnnnn에 의해 제안 된대로