[英]Event handler binding memory leaks
我有以下html:
<table id="link-table" class="style-1" style="width: 100%;">
<thead><tr><th> </th><th>Name <small>(75 characters)</small></th><th>Link</th><th></th></tr></thead>
<tbody id="link-table-body"></tbody>
</table>
該表的主體是從jsRender模板生成的:
<script id="tmpl-edit-mylinks-list" type="text/x-jsrender">
{{for links}}
<tr>
<td style="width: 1%;"><a href="#" class="move-up ir sprites-arrow-up-sm">Up</a><a href="#" class="move-down ir sprites-arrow-down-sm">Down</a></td>
<td style="width: 1%;"><input type="hidden" id="hdnLinkId" value="{{attr:LinkID}}" /><input id="txtLinkText" type="text" class="text" value="{{attr: LinkTitle}}" /></td>
<td><input id="txtLinkUrl" type="text" class="text" style="width: 100%;" placeholder="http://" value="{{url:URL}}" /></td>
<td><img src="/resources/images/sprites/cancel-black.png" class="delete-person-link" data-linkid="{{attr:LinkID}}" style="cursor:pointer;" /></td>
</tr>
{{/for}}
</script>
該模板與ajax調用的結果一起應用:
success: function (data) {
var links = { links: data };
var templateHtml = $("#tmpl-edit-mylinks-list").render(links);
$('#link-table-body').html(templateHtml);
//Attach handlers
$('.move-up').click(function (e) {
moveUpClicked(this);
});
$('.move-down').click(function (e) {
moveDownClicked(this);
});
$('.delete-person-link').click(function (e) {
DeletePersonLink(this);
});
}
我無法使用Jquery的.on()綁定這些.click處理程序。
我的問題是,像這樣綁定處理程序會導致內存泄漏嗎?
我應該在替換html並附加新處理程序之前調用unbind()嗎?
jQuery html()
方法內部調用使用cleanData()
empty()
方法。 使用您的實際代碼,不會有任何內存泄漏。 就是說,您可以通過委派此事件來避免為多個元素綁定多個重復處理程序,例如,使用:
$('#link-table-body').on('click', '.move-up' , moveUpClicked);
僅供參考,這是jQuery lib的一部分:
empty: function() {
var elem,
i = 0;
for ( ; (elem = this[i]) != null; i++ ) {
// Remove element nodes and prevent memory leaks
if ( elem.nodeType === 1 ) {
jQuery.cleanData( getAll( elem, false ) );
}
以及html()
方法的一部分:
if ( elem ) {
this.empty().append( value );
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.