$（document）和$（element）之间的差异

Question

我想了解之间的准确区别是什么：

 $(document).on('click', '.className', function(){});

和

 $('.className').click(function(){});

据我了解，通常只要有动态数据，通常就必须使用$(document)，但今天我发现它不能与$(document)一起使用，而当我将其替换为$('.className')时，它就可以使用！

我真的很想了解准确的区别，而不是显而易见的一次！

谢谢！

Answer 1

第一种方法是委托方法，它将事件处理程序附加到动态添加到DOM的元素（具有指定的类）上，而第二种方法则没有。

Demo：

委派方式：

// added dynamically 
$('body').append('<button type="button" class="btnClass">Click Me</button>')
$(document).on('click', '.btnClass', function(){
  alert('You have clicked the button');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btnClass">Click Me</button>