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

　　今天工作中需要在頁面動態生成html代碼,但發現新生成的代碼的click事件失效了(非動態生成的代碼已經綁定了click事件),於是在網上找了很多解決辦法,很多都比較復雜,且使用的jquery都比較老,於是結合網上加上自己的測試,找到了一種解決方法。

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

    <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,大家可以根據實際情況發揮。

　　總之,記住如果你要綁定動態生成的元素事件，一定要先找到他的父元素(父元素不能是動態生成的,否則繼續往上找),在父元素中綁定，然后再進行過濾就ok了,對了，我測試了hover事件發現不行,沒去深究原因。