如题
jQuery使用on()绑定动态生成元素的事件无效的问题
jQuery的on()方法可以绑定动态生成元素的事件，但是在实际使用时发现无效。如下HTML：
<p>
<a>123</a>
</p>
使用如下方式，对静态元素有效，但是绑定动态生成的a元素的事件时无效：
$('a').on('mouseenter',
function(){
............});
需要绑定a的父级元素（此元素必须为静态元素，不是后来动态生成的），然后设定on()方法的selector参数才行：
$('p').on('mouseenter',
'a',
function(){
.........
在jQuery中，`on()`方法是用于事件绑定的关键函数，特别是在处理动态添加到DOM中的元素时。然而，有时候我们可能会遇到使用`on()`方法绑定事件无法正常工作的情况，特别是针对动态生成的元素，如本例中的`<a>`标签。在问题描述中提到的情况，直接使用`$('a').on('mouseenter', function() {...})`来绑定`mouseenter`事件并不能对动态添加的`<a>`标签生效。
这是由于jQuery的事件冒泡机制导致的。事件通常从最深的元素向上冒泡到父元素，直到到达DOM树的顶层。`on()`方法在绑定时会检查目标元素是否已经存在于DOM中。如果元素是动态生成的，那么在页面加载时并不存在，因此事件绑定不会被应用到这些元素上。
为了解决这个问题，我们可以利用事件委托的概念。事件委托是通过将事件绑定到静态父元素上，然后通过`selector`参数指定要处理的子元素。当事件在子元素上触发时，由于事件会冒泡到父元素，因此父元素的事件处理器会被调用。这样，即使子元素是动态添加的，事件绑定也能生效。
在给定的例子中，我们可以将事件绑定到`<a>`标签的静态父元素`<p>`上：
```javascript
$('p').on('mouseenter', 'a', function() {
// 这里写你的事件处理代码
});
```
在这个设置下，当鼠标进入`<a>`标签时，由于`<p>`元素监听到了这个事件，所以事件处理器会被调用，无论`<a>`标签何时被添加到DOM中。
需要注意的是，`live()`方法在jQuery 1.7版本之后已经被废弃，因为它性能较低且存在一些问题。现在推荐使用`on()`来实现事件委托，因为`on()`方法更强大、更灵活，并且性能更好。
总结一下，解决jQuery中动态元素事件绑定无效的问题，可以采用以下策略：
1. 使用事件委托，将事件绑定到静态父元素上。
2. 在`on()`方法中指定`selector`参数，定义要处理的动态元素。
3. 确保父元素在DOM加载时就已经存在，以便能够监听到动态添加的子元素的事件。
通过这种方式，可以确保即使是动态生成的`<a>`标签，其`mouseenter`事件也能正确响应。这不仅适用于`<a>`标签，还适用于任何其他动态添加的元素及其事件。在编写jQuery代码时，理解和应用事件委托是提高代码健壮性和效率的重要技巧。
