深入解析:$().click()与$(document).on('click','目标元素',function(){})的差异

在前端开发中，jQuery 是一个非常流行的库，用于简化 HTML 文档操作、事件处理等任务。本文将重点介绍 $().click() 和 $(document).on('click', '目标元素', function() {}) 这两种常用的方法之间的主要区别。

### $().click()
$().click() 方法用于为指定的元素绑定点击事件处理器。此方法仅对页面加载时已经存在于 DOM 中的元素有效。例如：
```Javascript
$('button').click(function() {
// 当点击按钮时执行的代码
});
```
这种方法简单直接，适用于页面上静态存在的元素。

### $(document).on('click', '目标元素', function() {})
$(document).on('click', '目标元素', function() {}) 方法则提供了一种更灵活的事件绑定方式。它允许为当前或未来添加到文档中的元素绑定事件处理器。这意味着即使元素是在页面加载后通过 Javascript 动态添加的，该元素仍然可以响应点击事件。例如：
```Javascript
$(document).on('click', 'button', function() {
// 当点击任何按钮时（包括动态添加的）执行的代码
});
```
这种方法特别适合于需要处理动态内容的应用场景。

### 总结
- **$().click()** 适用于页面加载时就已存在的元素。
- **$(document).on('click', '目标元素', function() {})** 适用于所有元素，包括那些在页面加载后动态添加的元素。

了解这两种方法的区别，可以帮助开发者更有效地管理页面上的事件，特别是在处理动态内容时。