JQuery中動態生成元素的綁定事件（坑死寶寶了）

今天在做項目的時候，遇到了一個前端的問題，坑了我好長時間沒有解決，今天就記錄於此，也分享給大家。

問題是這樣的，首先看看我的界面，有一個初始印象：

下面是操作列所對應的JS代碼：

{

"data": function (datas) {
      return "<a   data-url='/Device/Edit?id=" + datas.Id + "' data-toggle='modal' class='btn btn-sm btn-default btn-circle btn-editable ajax-demo'><i class='fa fa-pencil'></i> 編輯</a>" +

              "<a href='?p=ecommerce_products_edit' class='btn btn-sm btn-default btn-circle btn-editable purple'><i class='fa fa-times'></i> 刪除</a>"; }

.cshtml頁面上最后生成的modal窗口生成的區域定義：

<!-- ajax -->
<div id="ajax-modal" class="modal fade" tabindex="-1"> </div>

操作modal模態窗口的JS的最終腳本為：

//ajax demo:
var $modal = $('#ajax-modal');

$(document).on('click', '.ajax-demo', function () {

// create the backdrop and wait for next modal to be triggered $('body').modalmanager('loading'); var el = $(this); setTimeout(function(){ $modal.load(el.attr('data-url'), '', function(){ $modal.modal(); }); }, 1000); });

這里，稍稍解釋一下：看到動態生成“編輯”按鈕的JS腳本中的a標簽中的class有一個ajax-demo沒有（我已用紅色字體標出）？其實這個類沒有任何樣式，只是一個標識類。其次，在操作modal的腳本中，先獲得模態窗口要顯示的區域，然后將含有“ajax-demo”類的元素綁定到click事件。這里要講的主要的坑爹問題是綁定事件的問題。

一開始是這么寫的，沒有獲取到元素，因而沒有執行綁定的click事件。

$('.ajax-demo').on('click', function() {......});

接下來，搜索問題，搜索到如下感覺比較靠譜的答案：

還是最后一個答案起了作用，首先，給了我一個不一樣的寫法的提示；其次，on,live以及bind都試過了，只有live沒有綁定到click事件，bind雖然也綁定到click事件了，但是半天加載不出異步請求的數據，只有on讓人滿意。

第一個是使用on綁定click事件的效果，第二個是bind綁定click事件的效果，bind最終是沒有加載出ajax內容。