是应该动态添加事件处理程序还是准备好文档？

Question

目前我使用两种方法添加事件处理程序来动态添加DOM对象，原因是我不知道哪些更有意义。

方法1 - 创建

function createButton(){
   var btn = $('<div class = "btn"/>');
   btn.on('click', function(){
     doStuff();
   });
   $('body').append(btn);
}

方法2 - 准备好文档

function createButton(){
   var btn = $('<div class = "btn"/>');
   $('body').append(btn);
}

$('document').on('ready', function(){
   $('body').on('click', '.btn', function(){
     doStuff();
   });
});

我也长期运行应用程序注意事项，并且会关注垃圾收集问题。

Answer 1

在方法1中，您将为您创建的每个按钮附加一个新的，但不是唯一的处理程序对象。

在方法2中，您正在为.btn类的任何内容重用相同的处理程序对象。

在短期内，我会使用方法2，因为对于任何给定的按钮，你只有1个处理函数，所以你也可以通过不创建冗余处理程序来节省内存。