2013-03-21 72 views
0

我想創建一個動態表,它應該在點擊行時在另一個表中顯示更多信息。Datatables和jQuery「on」方法

我這樣做是基於一年前寫過的一些代碼,我使用jQuery live方法。截至目前,這種方法不再存在,我切換到on方法。

現在,問題是,雖然此代碼實際上觸發了Datatable的創建,但它不會綁定行上的click事件。當我點擊它時,根本沒有任何反應。

這是一種負責任的Javascript代碼:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#overview").dataTable({ 
     aoColumnDefs:[{ 
      sWidth: "20px", 
      aTargets: [0] 
     }], 
     bLengthChange: false, 
     oLanguage: { 
      sProcessing: "Bitte warten...", 
      sLengthMenu: "_MENU_ Einträge anzeigen", 
      sZeroRecords: "Keine Einträge vorhanden.", 
      sInfo:   "_START_ bis _END_ von _TOTAL_ Einträgen", 
      sInfoEmpty: "0 bis 0 von 0 Einträgen", 
      sInfoFiltered: "(gefiltert von _MAX_ Einträgen)", 
      sInfoPostFix: "", 
      sSearch:  "Suchen", 
      oPaginate: { 
       sFirst: "Erster", 
       sPrevious: "Zurück", 
       sNext:  "Nächster", 
       sLast:  "Letzter" 
      } 
     }, 
     iDisplayLength: 10, 
     sAjaxSource: "<%=ivy.html.startref("API/WebAPI/antraege.ivp")%>?asUid=<%=ivy.html.get("in.asUid")%>" 
    }); 

    $(".dataset").on("click", function() { 
     antragid = this.id; 

     $.ajax({ 
      url: "<%=ivy.html.startref("API/WebAPI/antrag.ivp")%>", 
      dataType: "json", 
      contentType: "application/json; charset=utf-8", 
      data: { 
       id: antragid 
      }, 
      success: function(data) { 
       for (var key in data) { 
        $('#'+key).html(data[key]); 
       } 
      } 
     }) 
    }) 
}) 
</script> 

現在,因爲我使用這一個工作流工具,它正在與模板,我不能把這個代碼放到頭部(否則它會在每個使用此模板的頁面上加載),所以我不得不把它放到body標籤中,不知道這是否會影響這個問題。

現在,出現了一個奇怪的部分:當我複製上述代碼並在Chrome JS控制檯中執行它時,它確實會創建事件綁定,以便將詳細信息放入另一個表中。

我做錯了什麼?使用實時方法的應用程序仍然可以正常工作。

感謝

回答

2

需要委派事件最接近靜態父元素....上點擊動態添加元素的工作

試試這個

$(document).on("click",".dataset",function() { 
..... 

它委託給文件的作品..但它會更好,如果你可以委託它最接近的父母(我猜你的情況是#overview),當點擊被調用時,在文檔中出現..

更多約on()委託事件

+1

最接近的父代可能是表格:'$('#overview')'。對於事件委託的簡單解釋,請檢查http://stackoverflow.com/questions/8110934 – LeGEC 2013-03-21 10:14:08

+0

yaaa ..我認爲這是最親密的靜態父...謝謝!更新了我的答案 – bipen 2013-03-21 10:16:25

+0

哇,謝謝你們,那就是問題所在。花了我整個早上在這... – Ahatius 2013-03-21 10:23:12