通过使用.on()的jquery将事件附加到页面上的动态插入按钮

通过使用.on()的jquery将事件附加到页面上的动态插入按钮，可以实现动态绑定事件，使得新插入的按钮也能响应相应的事件。

具体步骤如下：

首先，确保已经引入了jQuery库。可以通过以下方式引入：<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
在页面上插入一个按钮的容器，例如一个div元素：<div id="buttonContainer"></div>
使用jQuery的.on()方法来绑定事件。该方法可以接受三个参数：事件类型、选择器和事件处理函数。在这个例子中，我们将事件类型设置为"click"，选择器设置为动态插入按钮的父元素的选择器（这里是"#buttonContainer"），事件处理函数用来处理按钮点击事件。$(document).on("click", "#buttonContainer button", function() { // 处理按钮点击事件的代码 });
动态插入按钮。可以使用jQuery的.append()方法将按钮插入到按钮容器中。$("#buttonContainer").append("<button>动态按钮</button>");

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>动态插入按钮示例</title>
    <script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="buttonContainer"></div>

    <script>
        $(document).on("click", "#buttonContainer button", function() {
            alert("动态按钮被点击了！");
        });

        $("#buttonContainer").append("<button>动态按钮</button>");
    </script>
</body>
</html>

这样，无论何时插入新的按钮，它们都会自动具有相应的点击事件处理函数。这种方法非常适用于需要动态生成按钮的场景，例如通过AJAX加载内容后插入按钮。