緒論:如果動態生成的元素用on來繫結事件,會根據selector不同,阻止冒泡的結果也不同。
公共html**和css樣式如下:
新增乙個li
$(function());
})
1、父節點繫結的父元素selector大於子元素繫結的selector,即父節點繫結的父元素大於子元素繫結的父元素,阻止冒泡正常
//能阻止冒泡,父元素的selector>子元素的selector
$('.item').on('click','.delete',function());
$('.ulwrap').on("click",'.item',function());
//可以能阻止冒泡,父元素的selector>子元素的selector
$('.ulwrap').on('click','.delete',function());
$('body').on("click",'.item',function());
2、父元素和子元素繫結的父節點為同乙個;不能阻止冒泡
//不可以能阻止冒泡,父元素的selector=子元素的selector
$('.ulwrap').on('click','.delete',function());
$('.ulwrap').on("click",'.item',function());
3、父元素繫結的節點《子元素繫結的父節;不能阻止冒泡
//不能阻止冒泡,父元素的selector《子元素的selector
$('body').on('click','.delete',function());
$('.ulwrap').on("click",'.item',function());
結論:子元素事件中需要新增event.stoppropagation();
1、父節點繫結的父元素大於子元素繫結的父元素,阻止冒泡正常
2、父元素和子元素繫結的父節點為同乙個;不能阻止冒泡
3、父元素繫結的節點《子元素繫結的父節;不能阻止冒泡
jQuery動態繫結
在實際專案的時候,遇到了乙個問題,就是通過js動態生成的元素,無法觸發js事件。原始的js function 上述型別的js 在處理隨著頁面載入而載入的dom元素是沒有問題的。但是在處理頁面載入完成後,通過動態新增的方式新增上的元素是無效的,需要另外利用jquery繫結。動態新增元素的js func...
jquery動態新增繫結事件
場景 在使用jquery的方式為元素繫結事件時,我經常使用bind或者click,但這只能為頁面已經載入好的元素繫結事件。像需要用ajax的方式請求遠端資料來動態新增頁面元素時,顯然以上幾種繫結事件的方式是無效的。解決方案 1.7之後也就是1.8開始,就不推薦用live 官方推薦用on 又稱事件委託...
jquery 動態元素事件繫結 on
jquery on 方法是官方推薦的繫結事件的乙個方法。selector on event,childselector,data,function,map 由此擴充套件開來的幾個以前常見的方法有.bind p bind click function p on click function deleg...