开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

通过使用.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加载内容后插入按钮。

相关搜索:使用javascript或jquery将事件添加到li中的按钮将jquery事件附加到动态创建的元素(jquery加载php文件)将事件侦听器添加到动态创建的按钮如何通过包含Unity参数的脚本将按钮事件添加到按钮？使用MutationObserver让jQuery识别新按钮的属性(通过ajax插入)无法将单击事件添加到jquery中动态追加的列表项将右键单击事件添加到c#中动态创建的按钮使用jquery将内联样式添加到动态生成的div 使用动态值将href标记附加到jQuery中的div 使用jquery中的第n个子事件将click事件添加到li 如何在不使用jquery的情况下将禁用的属性动态添加到引导按钮如何在同一页面上使用具有相同ID的多个(动态)切换按钮？如何使用jquery和thymeleaf创建动态按钮，每个按钮都有自己的事件侦听器如何使用javascript将onclick事件分配给动态创建的按钮使用jquery将单击按钮时的文本添加到简单表单使用JQUERY将ajax获取的数据添加到动态添加的元素中如何使用JQuery中的click事件将值追加到空数组中如何使用jquery将css类动态附加到mvc中的隐藏字段有没有办法通过点击按钮，使用jQuery和/或CSS来反转页面上的所有颜色？为什么这种在将jquery添加到DOM之后在jquery上动态创建按钮的方式会创建对象？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

富Web应用的架构与转化方法：Web应用系列第二篇

一、Rich Web应用富Web应用程序是具有以下特征的应用程序：丰富的用户界面组件无需页面重新加载动态页面更新以响应事件单页工作单位丰富的页面组件，是具有标准安装软件外观的用户界面元素。...快速入门演示了使用jQuery在注册新成员时显示消息。如何在页面上放置一个组件，例如列出当前库存的表格，并在库存发生变化时自动更新，即使库存交易不是来自你？使用RichFaces推送。...RichFaces推送组件适用于基于JMS或CDI事件的数据源。页面上的RichFaces组件充当服务器上发生的事件的侦听器。我们将审查基于CDI事件的组件版本。...有关上面代码段的注意事项：使用一些jQuery逻辑输出Javascript，以根据事件的内容显示消息。...探索推送功能我们在OrderEntry类中添加了一个类型为Invoice的推送事件。我们在create（）方法中放置逻辑来触发事件，在将发票插入数据库后传递它： ?

3.5K2 0

jQuery学习笔记之DOM操作、事件绑定（2）

appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 prepend(content):向每个匹配的元素的内部的开始处插入内容...prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处外部插入节点 after(content) :在每个匹配的元素之后插入内容...//得到的结果如下 jQuery 5.jQuery 中的事件在页面加载完毕后, 浏览器会通过 JavaScript...面试题： 1.在js里面可以使用widow.onload= 当页面上面所有的元素加载完毕之后执行触发。 2....它需要等待页面上面所有元素都加载完毕，包括图片，src=“” $(function(){})只需要页面上面的dom元素绘制完毕之后就执行，不含图片或者第三方的连接地址… 事件绑定我们除了可以直接为页面的元素增加事件

1.5K1 0

Wijmo 更优美的jQuery UI部件集：从wijwizard和wijpager开始

" type="text/javascript"> 你还需要添加CSS样式表，可以通过将以下CDN链接添加到你的工程完成：元素的标识符被设置成“pages”，你将在接下来通过jQuery访问这个元素以完成对部件的初始化。请注意，为了向部件添加页，你所要做的只是将文本放置在一对标签中间。...wijwizard添加到你的页面上就是这么简单。...保存你的工程，并在浏览器中打开。它将看起来像下面这样： ? 当部件包含多于一个页面的时候，导航按钮将自动的被添加到部件上。你可以更改，甚至删除控件上显示的导航按钮。...点击数字按钮之一，你可以发现已经可以使用wijpager部件对wijwizard进行分页浏览了。漂亮的结果，不是吗？使用Wijmo，你总是可以很容易的自定义你的部件。

2.5K7 0

JQuery快速入门

在使用jQuery时，需要注意jQuery对象和DOM对象的区别，通常对于jQuery对象，会在变量前加$，如var $variable=jQuery对象;。可以通过如下方式对两者进行转化。...、多选按钮、任意按钮 :image, :file 选取所有图像按钮，所有上传域 Tip：html元素的id包含#，（，]等特殊字符时，需要通过//进行转义，例如：</div...对于jQuery中的事件来说，其均使用事件冒泡机制，而不支持时间捕获机制(可以用原生js)。...事件冒泡就是当页面上有个元素时，其中一个嵌套在另一个中，如果均绑定了click事件，那么触发内层元素的click事件时，会同时触发外部的click事件。...接下来，将介绍jQuery库非常吸引人的动画操作，如下表所示。

2.6K10 0

前端之jQuery

" $('div').html() "人生苦短" 通过上例可以看出，text在添加文本的过程中可以将原标签内的文本和标签全都覆盖掉。...':'English'}) jQuery.fn.init [p#p1] 这里需要说明attr属性无法动态获取属性，可以通过prop进行动态获取属性。...如果直接动态绑定一个事件是无法触发该事件的执行的，为了解决这个问题，我们采用事件委托的方法。...目的：我们已经创建好的事件如果想被动态创建的标签使用就需要用到事件委托，比如已经创建好了按钮点击的事件如果我们要将这个事件绑定给动态创建的一个按钮就通过事件委托，将事件绑定给按钮的父标签，这样当子标签...（按钮标签）触发时就会出发父标签的事件。

4.9K2 1

8 个 DOM 功能

addEventListener() 的新参数 options 你肯定用 addEventListener() 处理过将事件附加到 Web 文档中的元素。...演示页面上的按钮只会附加一次文本。...使用 normalize() 和 wholeText 操作文本节点 HTML 文档中的文本节点可能会很复杂，尤其是当动态插入或创建节点时。...请注意以下演示： CodePen：https://codepen.io/impressivewebs/pen/MRymba 你可以将自己的文本添加到输入字段，然后使用该按钮将其添加到文档中。...如前所述，我们可以用熟悉的 addEventListener()方法将事件附加到网页上的元素。

1.8K2 0

Springmvc+uploadify实现文件上传

background.jpg 是上传框的背景图片 jquery.uploadify.min.js 迷你版的uploadify js文件，主要功能就靠它了 jquery-1.9.1.js 都懂得...，版本没啥要求 uploadify.css 上传组件的美化文件 uploadify.swf 上传时的动态效果，进度条等 Uploadify-cancel.png 取消上传按钮图片 3、将...二、在需要做上传的页面中配置 6、在页头导入 ?...7、在页面中需要上传附件的位置插入 //存放选择文件的图片按钮的 Div <input type="file" id="file_upload...//如果为<em>动态</em>值，请在onUploadStart()中<em>使用</em>settings()方法更改该JSON值 'formData':{ //可以不写 'user.username

1.1K2 0

JS DOM学习笔记

window.onload = function () { //...... } //动态注册事件，窗体加载完成后执行，和body onload效果差不多 7、window.控件Id(不建议使用），推荐...10、window.event是IE下非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取得相关信息。 ...= "提交"; //设置按钮值 document.appendChild(btn); //将按钮添加到文档中 13、不同浏览器中对DOM支持的方法不一样获取网页中那个元素触发了事件，在IE...中使用srcElement; 在FireFox里使用target 使用Dom获取和更改网页标签元素内文本，在IE中使用innerText; 在FireFox里使用textContent 动态为网页或元素绑定事件...，在IE中绑定事件的方法是attachEvent；在FireFox中绑定事件的方法是addEventListener jQuery之类的框架进行了封装，解决了不同浏览器上Dom的不同 14、jQuery

4K4 0

Django-choices字段值对应关系（性别）-MTV与MVC科普-Ajax发json格式与文件格式数据-contentType格式-Ajax搭配sweetalert实现删除确认弹窗-自定义分页器

自定义分页器批量插入测试数据 bulk_create 分页使用最终版的实现分页器 models 字段补充 choices 参数/字段（用的很多）用户性别、用户学历、工作状态、婚否（可限范围内可以罗列出来的...（这一特点给用户的感觉是在不知不觉中完成请求和相应过程）用 Ajax 做一个小案例页面上有三个 input 框，在前两个 input 框中输入数字，点击按钮发送 ajax 请求，在不刷新页面的情况下...// data形参用来接收异步提交的结果 // 将后端计算好的结果通过DOM操作渲染到第三个input矿中 $('#i3').val(data)...先用 jQuery 查找到存储文件的 input 标签将 jQuery 对象转成原生 js 对象利用原生 js 对象的方法 .files[0] 获取到标签内部存储的文件对象一定要指定两个参数（...'index.html', locals()) 利用 sweetalert 搭建页面（弹窗）先确保静态资源文件配置 settings.py 把 sweetalert 下过来，放到 static 下动态解析页面上引入对应的内容

6.2K3 1

前端必知的ajax

1. load( url, [data], [callback] ) ：载入远程 HTML 文件代码并插入至 DOM 中。 url (String) : 请求的HTML页的URL地址。...jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。...这个方法可以很方便的动态加载一些HTML文件，例如表单。...data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。...; }); jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

3K4 0

【JS】328- 8个你不知道的DOM功能

你肯定习惯于使用 addEventListener() 将事件添加到Web中的元素，一般情况下， addEventListener() 调用起来是这样的： element.addEventListener...如前所述，也可以通过复选框组来完成，尝试更改HTML中的默认选中选项，然后重试按钮。...使用 normalize() 和 wholeText 来操作文本节点 HTML 文档中的文本节点可能很不容易操作，特别是动态插入或者创造节点时。...，然后使用按钮将其添加到文档中。...afterend: 插入元素之后事件详细信息如前所述，事件使用熟悉的 addEventListener() 方法添加到网页上的元素。

1.4K1 0

一个简单粗暴的前后端分离方案

后端专注做业务逻辑，不想在后端做页面渲染的事情，只向前端提供数据接口。于是协商后打算将前后端完全分离，页面上的所有数据都通过ajax向后端取，页面渲染的事情完全由前端来做。...页面的事件监听器统一都注册在body元素上，用事件代理来完成，为了避免写太多的on、click之类代码，为jQuery扩展了一个delegates方法，用来以配置的方式统一绑定监听器，用法如上所示。...然而在实际操作中发现了一个问题，handlebars是静态模板，编译后生成的字符串通过innerHTML的方式插入到页面，在一般的模板中这样是没问题的。...现在有个问题是header中有一些标签，外链着要使用的库，通过innerHTML插入标签，浏览器并不会发送请求加载对应的js文件，所以就出问题了。...传统由后端渲染的页面，url中的参数会发送到服务端，服务端接收后可以再渲染到页面上供js使用。

1.5K1 0

25个常规方法优化你的jquery代码

处理DOM插入操作时，将需要的内容包装在一个元素中嗯，不要问我为什么要这样做（我相信一个有相当经验的程序员会给你解释）。在上面的例子中我们使用.html()将1000个item项插入到UL中。...如果在插入操作之前我们将这些项包装在UL标签中，然后把完整的UL插入到另一个DIV标签中，那么我们实际上仅仅插入一个标签而不是1000个，这看起来要更高效些。...我们已经在自己的网站上使用了这个技术。本页面上部的紫色按钮会弹出三个表格，方位与Google地图，这会使我们页面大小增加两倍。...首先，在jQuery加载之后你可以使用方法将”JS”类添加到HTML标签中：复制代码代码如下:$(‘HTML’).addClass(‘JS’); 因为这仅仅发生在javascript有效的时候，如果用户打开...有些时候你会注意到在点击链接后锚点会跳转到页面上部。所有你要做的就是阻止它的默认行为，或者实际上你可以把”return false;”添加到任何事件的默认行为上。

1.6K1 0

前端常用插件

onepage-scroll: 提供类似于 iPhone6 展示页类似的效果，适用于单页应用，兼容到 IE8 scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等)，性能很好 ScrollMagic...border-width 和 background-position 实现的各种动态效果，看真相 Fluidbox: 页面上内嵌图片的放大缩小效果，类似于 Medium 中的效果 jquery-validation...progressbar.js: 简洁美观的进度条，扁平化 pigshell: 一个由 Javascript 实现的Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat…..等命令,...的 JS 实现, 支持 IE8 及以上浏览器 trix: Basecamp 公司出品的富文本编辑器，简洁小巧 sensor.js: 在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能。...LocalStorage 的资源加载器，可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存 iscroll: 高性能的滚动(scroll)处理库，功能强大，支持各种事件，不依赖任何的库

4.7K6 1

：第十一章 - Vue 中 ref 的使用

1、虚拟 DOM 　　在我们使用 JS/Jquery 直接对 DOM 元素进行操作时，不管是对元素样式的修改（背景颜色从红色变成蓝色）还是对页面中的某些布局进行动态调整（通过点击按钮在列表中添加一行新的数据...嗯，可以说，我们很难抛弃 Jquery 的一个重大原因，就是当我们需要获取到页面上的 DOM 元素时，使用 Jquery 的 API 相比于原生的 JS 代码，简单到极致，有木有。...这里，我在 beforeMount、mounted 这两个 Vue 中的生命周期钩子函数以及一个按钮的点击事件中尝试获取到这个 input 输入框的值。...可以看到，当我们将 ref 添加到子组件上，我们就可以在 Vue 实例上获取到这个注册的组件引用，同注册的 DOM 元素一样，我们都可以使用添加的 ref 属性值作为 key 获取到注册的对象。...同样的，通过将 ref 属性添加到子组件上，我们就可以很轻松的获取到子组件的相关信息，这无疑给父组件获取子组件数据、调用子组件的方法提供了一种新的思路。

1.2K3 0

【Java 进阶篇】深入理解 JQuery 事件绑定：标准方式

事件是指用户在页面上进行的操作，比如点击、鼠标移动、键盘输入等。而事件绑定则是将特定的 JavaScript 代码与页面上的某个事件相关联，以便在事件发生时执行相应的操作。...JQuery 的事件绑定机制有两种主要方式：标准方式和简化方式。本篇博客将聚焦于标准方式，通过生动的例子带你逐步掌握这一强大的前端技能。准备工作在开始之前，确保你的项目中已经引入了 JQuery。...当按钮被点击时，回调函数内的代码就会执行，弹出一个提示框。标准方式：事件代理有时候，我们需要在动态生成的元素上绑定事件，这时候事件代理就派上用场了。...事件代理是一种委托机制，通过将事件绑定到父元素上，从而实现对子元素的事件监听。这对于大型应用程序和动态内容非常有用。 <!...通过将事件绑定到父元素上，然后利用事件冒泡原理，在父元素上捕获事件并判断具体触发事件的子元素，从而减少了事件绑定的数量。 <!

1894 0

jQuery Ajax 全解析

jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。...这个方法可以很方便的动态加载一些HTML文件，例如表单。...(可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。...jQuery Ajax 事件 Ajax请求会产生若干不同的事件，我们可以订阅这些事件并在其中处理我们的逻辑。在jQuery这里有两种Ajax事件：局部事件和全局事件。...好了，下面开始说jQuery里面功能最强的Ajax请求方法 $.ajax(); jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据这个是jQuery 的底层 AJAX

9.6K1 0

前端成神之路-03_jQuery

对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件 1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下...案例：发布微博案例 1.点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul 中。 2.点击的删除按钮，可以删除当前的微博留言。代码实现略。...我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。下载位置 ? 代码演示插件的使用三点： 1....() }) 1.4.6. bootstrap案例-阿里百秀 1.通过调用组件实现导航栏 2.通过调用插件实现登录 3.通过调用插件标签页实现 tab 栏代码实现略。...(i, 1)方法 // 5.存储修改后的数据，然后存储给本地存储 // 6.重新渲染加载数据列表 // 7.因为a是动态创建的，我们使用on方法绑定事件 1.7.6 案例：toDoList 正在进行和已完成选项操作

3K2 0

java中的jQuery与Ajax的应用，菜鸟教程

Ajax揭开了无刷新更新页面的新时代，并有代替系统的Web方式和通过隐藏的框架来进行异步提交的趋势，是Web开发应用的一个里程碑。...Ajax的优势与不足优点缺点不需要插件支持浏览器对XMLHttpRequest对象的支持度不足优秀的用户体验破坏浏览器的前进后退按钮的正常使用提高Web程序的性能对搜索引擎的支持不足...content : $("#content").val() }, function(data, textStatus) { $("#resText").append(data); // 把返回的数据添加到页面上...p class='para'>"+content+""; $("#resText").append(txtHtml); // 把返回的数据添加到页面上..." + content + ""; $("#resText").html(txtHtml); // 把返回的数据添加到页面上

1.4K3 0

JavaWeb（八）JQuery

是浏览器自带对象，dom 对象只能调用dom 里面的属性和方法，不能调用jQuery 对象里面的属性和方法 jQuery对象：jquery 对象是通过jQuery 包装页面上面的元素或者dom 而产生的一个新的...$(this) ：当前 HTML 元素元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。...触发、或将函数绑定到指定元素的 double click 事件 delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 die() 移除所有通过 live() 函数添加的事件处理程序...event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 event.type 描述事件的类型。 event.which 指示按了哪个键或按钮。...函数描述 .add() 将元素添加到匹配元素的集合中。 .andSelf() 把堆栈中之前的元素集添加到当前集合中。 .children() 获得匹配元素集合中每个元素的所有子元素。

1.8K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭