通过使用.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加载内容后插入按钮。
相关·内容
我有一个我返回用户帖子的页面，这些帖子可以使用一些jquery代码即时评论，在新评论发布后，我在帖子下插入新评论以及一个Delete按钮。问题是Delete按钮在新插入的元素上不起作用，除非我重新加载页面。我读到解决方案是使用.on()方法，但是我对如何实现它有点困惑。我有一个用新插入的评论更新post部分的函数，这是一个删除评论的函数：
$(document).
浏览 12提问于2016-07-30得票数 0
回答已采纳
我开发了一个rails应用程序，它的主要特性是业务搜索页面，它通过显示业务结果页面和允许用户进一步搜索/过滤结果的表单发挥作用。最近，我使用jQuery移动实现了该应用程序的移动接口，设置如下：
业务结果页面是有两个div的数据角色" page“。在第一页的页眉栏中有一个按钮，它用对话框的数据来链接到#search-form。如果有人直接访问site.com/busin
浏览 0提问于2011-06-26得票数 3
:right; } <script src="http://code.jquery.com/jquery-latest.js"></script><h2>This is the sub content</h2>
<button class="hide
浏览 4提问于2012-05-17得票数 0
回答已采纳
我试图使用JQuery和DataTables插件在特定索引处动态添加/删除表中的行。我试图添加的行是一些附加信息，我通过单击一行(ajax)获得这些信息。每一行都有我作为参数传递的唯一id。
$('#jt').on('click','.togetinfo',function() {....对于每个结果，我都将内容添加到
浏览 2提问于2014-02-24得票数 0
回答已采纳
6回答
我使用动态ids动态生成一些按钮。我希望根据每个按钮的id来处理它的点击。但这不管用。以下是我的代码： html+='<tr><td><input type="button" value="
浏览 5提问于2014-03-19得票数 1
回答已采纳
2回答
我将一个动态列表加载到一个使用jquery mobile + (jquery和javascript)构建的HTML5Web应用程序中。我想显示一个简单的“正在加载...”在动态填充列表的同时，通过在页面上放置一个<div>来获取图像。一旦列表完成，我需要触发一个事件来删除“加载...”图像。是否可以将.ready或.load事件附<e
浏览 1提问于2011-12-19得票数 2
回答已采纳
6回答
我还在div中包含了一个按钮，这样当单击时，它应该会将数量减少1。 { });
{});
我输入了一条警告消息，以查看该按钮是否正常工作，但当我单击btnRemove1按钮时，什么也没有发生。
浏览 0提问于2013-03-28得票数 4
回答已采纳
1回答
我使用ajax脚本和部分视图来发布和检索数据，而不需要任何回发或视图闪烁。使用下面的ajax脚本将返回内容位于名为"ajaxcom"的指定div元素中的部分视图，正如您在下面的脚本中看到的那样。现在，我注意到，在数据(“这是partialview")检索并显示在上视图的指定div元素之后，看起来就像一个静态，或者它变成了只读文件，因为它不再响应了，我的意思是，在这个部分视图上，我有一些功能，比如用相应的<
浏览 2提问于2014-10-09得票数 0
回答已采纳
我使用了来自以下答案的代码：创建了表单中一个可克隆的区域，除了“添加另一个”和“删除行”按钮外，所有操作都很好。只有原始的可克隆区域Add / Remove按钮才能工作，所以下一个克隆区域的add / remove按钮不会做任何事情，这意味着您必须使用第一行，这是令人困惑的。
浏览 3提问于2013-10-14得票数 4
回答已采纳
我有一些定制的jQuery在分页后消失。我不知道如何保持它加载，所以我想我会尝试重新加载点击后，但这也不起作用。下面是我想让它运行的东西：$('.pagination>li>a').live("click", function(){
有什么办法让这件事成功吗我真正想要的是在分页时保留自定义的jQuery，因为在任何给定的页面上都可能有两个
浏览 4提问于2022-12-03得票数 0
1回答
可能重复：
我正在尝试替换按钮的文本值，但是在页面加载时该按钮并不存在，它是在其他用户选择完成后出现的。当按钮出现在页面上时，我正在尝试替换按钮文本--而不是基于它被点击或悬停在上面或类似的情况下。如果按钮是载的，我就可以使用javascript来替换值，而不会有任何问题--但是我很难弄清楚jQuery是否可以这样做，以及使用哪个函数？
浏览 0提问于2012-09-24得票数 0
2回答
当使用jquery单击链接标记时，我正在尝试更改它的文本。诀窍在于标签是用jquery创建的，并且在页面加载时不存在。这就是问题所在：$(document).ready(function () {
我听说这是一个常见<e
浏览 0提问于2014-12-28得票数 0
我使用jQuery动态创建按钮： var $btn = $('<button/>', { id: 'btn_refresh', });}
但是，当我用该语法单击按钮</
浏览 0提问于2016-01-05得票数 2
回答已采纳
1回答
当您通过后退按钮返回页面时，是否会触发任何事件？我有一个页面，用户可以从几个复选框中选择。选中的每个复选框都会在页面上生成一个动态创建的按钮。当我导航到下一页并点击back按钮时，复选框仍处于选中状态，但我动态创建的按钮将消失。这个问题能解决吗？
浏览 1提问于2014-10-21得票数 0
2回答
我正在构建一个jQuery函数，它允许用户向表单中添加额外的字段。该表单有四个按钮，分别对应不同的捐赠金额。当您单击其中一个时，它会生成适当的表单域，并添加一个用于额外捐赠的选项。由于某些原因，额外的捐赠按钮不起作用。这些按钮的代码是完全相同的，所以这对我来说毫无意义。" href="#" style="padding-right:13px;">
浏览 1提问于2013-06-12得票数 0
回答已采纳
我在产品中需要禁用产品详细信息页面上的quantity字段，并根据另一个值动态地更改数量。我使用以下代码更改值： jQuery('.wc-pao-addon-custom-textarea数量变化，如果我点击“添加到购物车”按钮，我有数量在我的
浏览 0提问于2022-05-28得票数 0
回答已采纳
1回答
我有一个简单的jquery脚本，可以更改图像的url路径。唯一的问题是在我点击load more按钮后不适用。因此，我正在尝试一种变通方法，即在单击按钮后再次调用脚本。
浏览 0提问于2016-10-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
