jquery動態生成html代碼綁定事件

時間 2019-12-10

原文原文鏈接

今天工做中須要在頁面動態生成html代碼,但發現新生成的代碼的click事件失效了(非動態生成的代碼已經綁定了click事件),因而在網上找了不少解決辦法,不少都比較複雜,且使用的jquery都比較老,因而結合網上加上本身的測試,找到了一種解決方法。html

　　我使用的jquery是1.9.11,jquery1.7以後就將live方法廢棄了,新增了on和off方法,個人解決辦法就是使用on方法,首先看代碼：jquery

    <div class="h3">
        <h3>李健1</h3>
        <h3>李健2</h3>
        <h3>李健3</h3>
        <h3>李健4</h3>
        <h3>李健5</h3>
    </div>
    <div class="div">增長</div>

　　　　$(function(){
            $(".div").click(function(){
                var h = "";
                for(var i=0;i<5;i++){
                    h += "<h3>李健"+i+i+"</h3>";
                }
                $(".h3").append(h);
            });
　　　　});
//這裏我每點擊增長一次會在<div class="h3">最後增長5行<h3>李健i</h3>,我如今要讓全部的<h3>都綁定click事件(包括動態生成的)

　　$(".h3").on("click","h3",{foo:"文本:"},function(event){
　　　　alert(event.data.foo+this.textContent);
　　});瀏覽器

是否是很簡單,這裏選擇<div class="h3">做爲父元素調用on方法綁定click事件,這樣父元素下的全部元素都綁定了click事件,有時候並不須要全部的都綁定,那怎麼辦？好辦,只需在"click"後增長選擇器(也就是你想選定的子元素),{foo:"文本:"}:表示傳給event.data的數據(參數),在處理函數中咱們能夠調用event.data.foo讀取到傳入的函數值。打開瀏覽器調試工具你還能夠獲取<h3>中的文本,我這裏是this.textContent,你們能夠根據實際狀況發揮。app

　　總之,記住若是你要綁定動態生成的元素事件，必定要先找到他的父元素(父元素不能是動態生成的,不然繼續往上找),在父元素中綁定，而後再進行過濾就ok了,對了，我測試了hover事件發現不行,沒去深究緣由。函數

1、問題描述工具

　　用jQuery的append()方法動態添加了一段html代碼以後，發如今爲新添加的元素綁定click事件時沒法獲取該新元素。測試

2、解決方法this

　　度娘推薦的方法基本是用live()方法spa

　　live()的官方定義和用法:.net

　　live() 方法爲被選元素附加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。經過 live() 方法附加的事件處理程序適用於匹配選擇器的當前及將來的元素（好比由腳本建立的新元素）。

　　live()的詳細使用方法能夠查看jQuery live()

　live()和bind()的區別就是live不只能夠給頁面中現有的元素綁定事件，還能夠給未來動態添加進來的元素綁定時間。

　　因而我用live()替換了bind(),但報出了新錯誤：TypeError: $(...).live is not a function

　　通過查詢之後發現，原來是jQuery 1.9及其以上已經沒法使用live（），能夠用on()方法代替live().

　　on()的官方定義和用法:

　　on() 方法在被選元素及子元素上添加一個或多個事件處理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

　　注意：使用 on() 方法添加的事件處理程序適用於當前及將來的元素（好比由腳本建立的新元素）。

　　on()的詳細使用方法能夠查看jQuery on()

3、代碼演示

html頁面：

 
         <!DOCTYPE html> 
        
         <html> 
        
         <head lang= 
         "en" 
         > 
        
         <meta charset= 
         "UTF-8" 
         > 
        
         <title>jQuery on()方法測試</title> 
        
         </head> 
        
         <body> 
        
         <button id= 
         "click1" 
         >Click me!</button> 
        
         <p>Hello,</p> 
        
         <script src= 
         "js/jquery.min.js" 
         ></script> 
        
         <script src= 
         "js/test.js" 
         ></script> 
        
         </body> 
        
         </html>

test.js：

 
         $().ready( 
         function 
         (){ 
        
         $( 
         "#click1" 
         ).bind( 
         "click" 
         , 
         function 
         (){ 
        
         $( 
         "p" 
         ).append( 
         "<div class='new'><b>I'm clicked!</b></div>" 
         ); 
        
         }); 
        
         //on方法要先找到原選擇器（p),再找到動態添加的選擇器（.new) 
        
         $( 
         "p" 
         ).on( 
         "click" 
         , 
         ".new" 
         , 
         function 
         (){ 
        
         　　　　$( 
         this 
         ).remove(); 
        
         }); 
        
         });