jquery動態(tài)生成元素怎么綁定事件

今天小編給大家分享一下jquery動態(tài)生成元素怎么綁定事件的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

項目里有個需求，需要動態(tài)添加dom元素（button），并可以實現(xiàn)點擊事件。這個事件可以用onclick屬性添加在元素里，也可以通過js查找dom元素注冊點擊事件，本著表現(xiàn)與業(yè)務(wù)分離的原則，我用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);

});

但是跑起來后，這個事件是沒有用的，原因是什么呢？

因為這是動態(tài)添加的元素，在代碼執(zhí)行到注冊事件這一步時，添加的dom元素還沒有在界面渲染完成，這時，注冊事件是無效的。

如何平衡這個矛盾，即要用js注冊實現(xiàn)表現(xiàn)與業(yè)務(wù)分離，又要實現(xiàn)元素的事件注冊？

下面就是解決方案：

$(document).on('click', "#" + index + "sbutton", function () {

sendEvent(data);

});

on() 和 click() 二者在綁定靜態(tài)控件時沒有區(qū)別，但是如果面對動態(tài)產(chǎn)生的控件，只有 on() 能成功的綁定到動態(tài)控件中，on其實整合了delegate的委托功能，可以實現(xiàn)這種委托綁定事件。

以上就是“jquery動態(tài)生成元素怎么綁定事件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關(guān)注億速云行業(yè)資訊頻道。