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內容。