JS動態添加的標簽無法綁定事件解決方案~~~


今天用ajax實現動態插入數據時發現監聽一直不起作用,一樣的代碼,非動態的就可以監聽實現

這是困擾了我近一個小時的bug,后面才理解到可能是動態插入導致的!

看了看網上的解決方案,似乎都不太通俗,講的也不周全,記錄一下,這是成長的印記!

 

廢話不多說,直接看問題上方案!

<tbody>
            <tr>
                <th><a href=""></a></th>
            </tr>
</tbody>

//如上述代碼中tr標簽及th標簽都是通過JS代碼動態添加的,這時候我們又需要監聽a標簽的點擊事件
//通過下面的監聽方式是無法實現的

$("a").on("click",func(){})


//由此我們需要通過對非動態父標簽或者祖先級標簽來監聽子標簽實現

 

 

解決方案!!

$('tbody').on("click","a",function(){ 
          alert(this.id);
})

代碼解析:既然無法直接監聽動態插入的標簽,那我們就通過代理監聽,也就是通過非動態插入的父標簽對子標簽進行監聽。

$('tbody') 對應的tbody標簽是非動態插入的祖先級標簽,切記,這里的父級標簽一定是非動態的!!!!
"a" 標簽即我們需要監聽的標簽,可以通過其他選擇器來查找標簽,比如id或者類等等,這里只是用標簽查找做演示。
在函數體內我alert了this.id, 有的人對這個this不理解,它到底指的是誰,我也曾有這個疑惑,但百度的博客似乎沒人講清楚
  其實這個 this 指的就是 a 標簽本身, this.id就是a標簽的id。


事實上任何標簽都可以通過父標簽代理監聽的方式去監聽,或許效果會更好


以上就是固定格式,歡迎來摟~~





免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM