您好,登錄后才能下訂單哦!
今天小編給大家分享一下jquery動態生成元素怎么綁定事件的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
項目里有個需求,需要動態添加dom元素(button),并可以實現點擊事件。這個事件可以用onclick屬性添加在元素里,也可以通過js查找dom元素注冊點擊事件,本著表現與業務分離的原則,我用js注冊元素的點擊事件。
$(row).find("td:last-child").append(`<div ><button id="` +
index + `sbutton" name="send" class="btn btn-lg
btn-primary">指派</button><button id="` + index +
`hbutton" name="ignore" class="btn btn-lg btn-primary">忽略</button></div>`
);
$(index + "sbutton").click(function(){
sendEvent(data);
});
但是跑起來后,這個事件是沒有用的,原因是什么呢?
因為這是動態添加的元素,在代碼執行到注冊事件這一步時,添加的dom元素還沒有在界面渲染完成,這時,注冊事件是無效的。
如何平衡這個矛盾,即要用js注冊實現表現與業務分離,又要實現元素的事件注冊?
下面就是解決方案:
$(document).on('click', "#" + index + "sbutton", function () {
sendEvent(data);
});
on() 和 click() 二者在綁定靜態控件時沒有區別,但是如果面對動態產生的控件,只有 on() 能成功的綁定到動態控件中,on其實整合了delegate的委托功能,可以實現這種委托綁定事件。
以上就是“jquery動態生成元素怎么綁定事件”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。