jQuery動態綁定
阿新 • • 發佈:2019-05-15
tle 一個 src 動態添加 復制代碼 加載完成 selector 官網 。。
轉:
一、原始需求
在實際項目的時候,遇到了一個問題,就是通過JS動態生成的元素,無法觸發JS事件。
原始的JS代碼:
$(function () {
$(".original").click(function () {
alert("123");
});
})
上述類型的JS代碼在處理隨著頁面加載而加載的DOM元素是沒有問題的。但是在處理頁面加載完成後,通過動態添加的方式添加上的元素是無效的,需要另外利用Jquery綁定。
動態添加元素的JS代碼:
$(function () {
$(".run").click(function () {
var btn = "<button class=‘original‘>我是新來的的</button>";
$(".out").append(btn);
});
})
此時如果點擊 新添加的按鈕,通過上述聲明式無法處理響應事件的。
PS:至於原因是什麽,這個我也不太清楚。
二、jQuery的on方法
通過查閱相關說明,發現jQuery的on()方法是支持在動態添加的元素上綁定事件的,使用見:
官網說明(英文):官方API解釋
中文說明(中文):中文API解釋(推薦)
詳細說明請參考上述網站,這裏只提出幾個重點來講解:
- 使用格式:jQueryObject.on( events [, selector ] [, data ], handler )---[此為可選項]
- 解釋:events為單個或多個事件,handler為觸發事件要執行的動作。
- 對於selector而言,如果為null或不寫那麽是綁定jQueryObject匹配到的元素;如果不為null,則表明綁定的是jQuyerObject的後臺元素中所有符合selector要求的元素。
三、處理方法
<script type="text/javascript">
$(function () {
// 方法1
$(document).on("click", ".original", function () {
alert("HHHH");
});
//無效?
$(".original").on("click", function () {
alert("HHHH");
});
})
</script>
方法1肯定有效,但是很奇怪方法2無效。。。
四、補充
思考好了再補充,留待此次。。。
jQuery動態綁定