javascript - 事件处理程序绑定(bind)内存泄漏

Question

我有以下 html:

<table id="link-table" class="style-1" style="width: 100%;">
    <thead><tr><th>&nbsp;</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() 来绑定(bind)这些 .click 处理程序。

我的问题是，像这样绑定(bind)处理程序会导致内存泄漏吗？

我应该在替换 html 并附加新处理程序之前调用 unbind() 吗？

Answer 1

Jquery html() 方法内部调用使用 cleanData() 的 empty() 方法。使用您的实际代码，您不会有任何内存泄漏。也就是说，您可以通过委托(delegate)此事件来避免为许多元素绑定(bind)多个重复的处理程序，例如使用:

$('#link-table-body').on('click', '.move-up' , moveUpClicked);

仅供引用，这是 jQuery 库的一部分:

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 );
            }