在jQuery中，`append`方法是用来向DOM树中动态添加元素的，这在构建动态页面时非常常见。然而，一个常见的问题是在使用`append`添加的元素上绑定的事件经常无法正常工作，即所谓的“事件无效”。这是因为这些新添加的元素在页面加载时并不存在，所以jQuery无法为它们预先绑定事件处理器。
jQuery提供了`on`方法来解决这个问题。`on`方法自jQuery 1.7版本起成为绑定事件处理程序的主要方式，它取代了`bind`、`live`和`delegate`等方法。`on`的一个关键特性是它能够处理当前存在以及未来可能被添加到DOM中的元素的事件。
基本的`on`方法语法如下：
```javascript
$(selector).on(event, childSelector, function(eventData, handler));
```
在这里，`selector`是你想要绑定事件的父级元素，`event`是你想要监听的事件类型，如`click`、`mouseover`等，`childSelector`是子元素的选择器，`handler`是事件触发时执行的函数。
在动态添加元素并绑定事件时，你可以这样使用`on`：
```javascript
$(parentElement).on("event", "childSelector", function() {
// 事件处理代码
});
```
例如，如果你有一个`#zkdiv`元素，并且要在其中动态添加带有`zk`类的按钮，并为这些按钮绑定点击事件，可以这样做：
```javascript
$("#zkdiv").on("click", ".zk", function() {
console.log("on 点击一次");
});
```
然后，当你使用`append`添加新的按钮元素时，这个事件处理器会自动应用到新添加的元素上：
```javascript
var html2 = "<input type='button' class='zk' value='新生成的展开' />";
$("#zkdiv").append(html2);
```
相比于之前的`live`方法，`on`方法提供更好的性能，因为它允许你指定更具体的事件代理元素，而不是始终绑定到`document`。这样可以减少事件冒泡带来的性能开销，特别是在有深嵌套DOM结构的情况下。
要注意的是，使用`on`方法时，确保`parentElement`在DOM中已经存在，否则事件处理器将无法生效。此外，`on`方法还可以用于一次性事件，只需在调用时添加`one`作为`on`的前缀，如`one("click", ...)`，这样事件处理器会在触发一次后自动解除绑定。
解决jQuery `append`添加元素的事件无效问题，关键在于使用`on`方法代替`click`等直接的事件绑定，并将事件处理器绑定到一个固定的、已存在的父元素上，以便处理动态生成的子元素的事件。这种方法不仅解决了事件绑定问题，还提高了性能，是现代jQuery应用的最佳实践。
