$(选择器).click()和$(document).on(‘click‘,‘要选择的元素‘,function(){})的用法与不同

1. $(选择器).click()
   • 用法：
     这是一种直接为已存在于页面中的元素绑定点击事件的方式。它查找当前文档中符合指定选择器的所有元素，并为它们添加一个点击事件处理程序。
   • 示例：

     $('button').click(function() {
       alert('按钮被点击了');
     });
     

     在这个例子中，选择器'button'匹配文档中所有的按钮元素，当其中任何一个按钮被点击时，就会弹出提示框。
   • 局限性：
     它只能为当前页面加载时已经存在的元素绑定点击事件。如果动态地通过 JavaScript 在页面中添加新的符合选择器的元素，这些新添加的元素不会自动被该点击事件处理程序捕获。
2. $(document).on('click', '要选择的元素', function() {})
   • 用法：
     这是一种事件委托的方式。它是将点击事件委托给document，绑定到文档上。当在文档中任何位置触发点击事件时，如果该点击事件的目标元素匹配指定的选择器，就会执行绑定的事件处理函数。
   • 示例：

     $(document).on('click', 'button', function() {
       alert('按钮被点击了');
     });
     

     这里选择器’button’指定了只有当点击的元素是按钮时，才会触发事件处理函数。和直接用$('button').click()不同的是，即使页面加载后通过 JavaScript 动态添加了新的按钮，这些新按钮的点击仍然会触发这个事件处理程序。这是因为点击事件是委托给了文档，而不是直接绑定到现有的按钮元素上。
   • 优势：
     它在处理动态添加的 DOM 元素时非常方便，可以减少事件处理程序绑定的数量，提高性能。适用于在一个父元素中动态添加子元素（这些子元素符合指定选择器）并希望统一处理它们点击事件的场景。

总的来说，$(选择器).click()适用于为当前已存在的元素绑定事件，而$(document).on('click', '要选择的元素', function() {})更适合处理动态添加的元素的点击事件，采用了事件委托的机制。