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事件發現不行,沒去深究緣由。