Question

这里的问题是关于将事件侦听器绑定到 dynamic 的元素的正确（最佳实践）方法。

例如，请考虑以下代码。我们有两个按钮show_alert。第一个是静态的，第二个是动态的，只有在用户执行某些操作后才显示（在这种情况下，按下类render-button的按钮）。

现在的问题是：

以前，我使用以下代码将事件绑定到这样的动态元素：

$('document').on('click', '.show-alert', function(e){
    alert('Hello');
});

但是这段代码的问题在于每次重建DOM树都很糟糕。

所以我通过以下方式对其进行了改进：

$('.parent').on('click', '.show-alert', function(e){
    alert('Hello');
});

其中.parent是一个DOM元素，我确信它是静态的。逻辑是：选择一个静态的包装器并将所有元素绑定到它：

$('.static_wrapper').on('click', '.target-class', function(e){
    alert('Hello');
});

问题：

选择静态包装器的逻辑是否是一项重大改进 $('document').on('click', '.target-class', function(e){...。如果你有一个相当大的部分是动态的接口并且你必须在DOM树中选择一个非常高的静态元素，那么DOM树重建的问题是否仍然存在？像

<div class="static-wrapper">
    <div>
        <div>
            <!-- and still many many divs...... -->
                     <div class="target-class"

$(document).ready(function() {
     var str = '<div class="second-parent">' +
               '<button class="show-alert">Dynamic button</button>' +
	             '</div>'
     $('.render-button').on('click', function(e){
     			$('.parent').append(str);
     });
     
     /*
     $('.show-alert').on('click', function(e){
         alert('Hello');
     });
     */
     $('.parent').on('click', '.show-alert', function(e){
         alert('Hello');
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'parent'>
      <div class="second-parent">
          <button class="render-button">Press to render dynamic button</button>
      </div>
      <div class="second-parent">
          <button class="show-alert">Static button</button>
      </div>
</div>

优化代码以将事件侦听器绑定到通过Ajax

0 个答案: