jquery 繫結 動態html標籤事件
阿新 • • 發佈:2018-12-14
可以這樣理解,無論HTML內容是不是JS生成的,只要沒有跨域,所有頁面內的元素都屬於這個頁面,都能夠繫結事件,JS中有個非常重要的概念叫事件冒泡,簡單來講,就是子元素產生的事件,會一直冒泡到最頂級父元素,並能夠被父元素監測到。請看下圖:
事件冒泡
那麼,我能不能在被插入元素的父元素上監測冒泡產生的事件,並回調相應的函式呢?答案是當然是肯定的。來看下面的例子,注意網頁面裡插入內容是在JS程式碼的最後。
<script> $(function(){ $("body").delegate("p","click",function(){ console.log("Click Event"); }) $("<p>這是生成的內容</p>").appendTo("body"); }) </script>
這是,發現所有的P元素點選都產生了輸出,說明程式碼執行成功。這裡我們用到了jQuery的delegate函式,來看一下官方解釋:
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
根據特定的根元素,把一個或者多個事件註冊到指定的元素上,不論這個元素現在是否存在。
在jQuery1.7.3以上的版本中,on方法也可以做這件事,官方有示例說明,這裡不再贅述。
比如有一些情況多次從後臺獲取動態內容到前臺,點選的時候會觸發多次,還要使用 $("body").undelegate(); 解除之前的繫結 然後再一次重新繫結。
1 2 3 4 |
|