js動態加載HTML元素時出現的無效的點擊事件

項目中列表數據中隱藏着詳情數據，

圖一：

詳情數據是：根據當前行的數據作為參數，通過ajax請求到后台返回的數據,再根據返回的結果動態生成HTML頁面

圖二：

 js文件中的這些js的點擊事件無效：

js代碼：

// 推薦商家點擊標題展開與收起
$('.toggle-tag').on('click', function(){
    var ele = $(this).parents('tr').next().find('.pro-details');
    if(ele.is(':hidden')){
        $('.pro-details').slideUp();
        ele.slideDown();
    }else{
        ele.slideUp();
    }
});

// 推薦商家點擊收起
$('.toggle').on('click', function(){
    $(this).parents('.pro-details').slideUp();
});

 

后面找到原因： 是因為這些動態加載的這些HTML頁面（圖二），是在列表數據頁面（圖一）的HTML元素，css,js代碼加載完后，再添加的HTML元素，

在瀏覽器解析到圖一的頁面元素時， 解析到js的這些綁定標簽事件的js代碼（上面的JS代碼）的時候，這些綁定事件的標簽元素還沒有生成，

（因為js代碼加載完后，才會有這些綁定事件的標簽），所以這些JS 代碼的綁定的事件，根本就沒有綁定到這些動態加載的標簽上，所以哪些事件不會觸發。

 

解決方案：

 

類似動態加載的HTML元素需要綁定事件可以用 jQuery 事件 - delegate() 方法；

-------------------------------------------------------------------------------------

定義和用法

delegate() 方法為指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

使用 delegate() 方法的事件處理程序適用於當前或未來的元素（比如由腳本創建的新元素）。

語法

$(selector).delegate(childSelector,event,data,function)

參數	描述
childSelector	必需。規定要附加事件處理程序的一個或多個子元素。
event	必需。規定附加到元素的一個或多個事件。 由空格分隔多個事件值。必須是有效的事件。
data	可選。規定傳遞到函數的額外數據。
function	必需。規定當事件發生時運行的函數。

 

親自試一試 - 實例

向未來的元素添加事件處理程序

如何使用 delegate() 方法向尚未創建的元素添加事件處理程序。

-----------------------------------------------------------------------------------------------------------

我的解決方案 ：（紅色代碼部分， 其余是別的邏輯代碼）

    /**
       * 材價詳情顯示和隱藏
       */
      $("body").delegate(".toggle-tag","click", function(){
         //點擊再加載材價詳情數據
         var rowData = $(this).parents('tr').find("td").eq(0).find("input").val();
        var row = eval("("+rowData+")");
        var id = row.id;
        var name = row.stdName;
        var spec = row.spec;
        var unit = row.unit;
        var city = row.city;
        var province = row.province;
        if($('#detailTr_'+id+'_'+city).find("td").length==0){
            var html = std_matpriceLib_list.getMatPriceDetailData(id,row);
            
            $('#detailTr_'+id+'_'+city).html(html);
        }
         // 推薦商家
        $('.business-icon li a').hoverIntent({
            over:function(){
                $(this).find('.name,.opacity').fadeIn('fast');
            },
            out:function(){
                $(this).find('.name,.opacity').fadeOut('fast');
            }
        });
    
          var ele = $(this).parents('tr').next().find('.pro-details');
          if(ele.is(':hidden')){
              $('.hideTr').hide();
              $('#detailTr_'+id+'_'+city).show();
             $('.pro-details').slideUp();
              ele.slideDown();
              //獲取材價點評統計
//          getCommentStatis(id,city);
          }else{
              $('#detailTr_'+id+'_'+city).hide();
              ele.slideUp();
          }
          loadCharts(id,name,spec,unit,city,province);
      });

　　

      // 推薦商家點擊收起    
      $("body").delegate(".toggle","click", function(){
          $(this).parents('.pro-details').slideUp();
          $(this).parents('tr').hide();
      });