开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用jQuery时，无法向使用innerHTML创建的按钮添加单击行为

使用jQuery时，可以使用事件委托（event delegation）的方式向使用innerHTML创建的按钮添加单击行为。事件委托是一种将事件处理程序绑定到父元素上，然后通过事件冒泡的方式来触发处理程序的技术。

具体实现步骤如下：

首先，给父元素添加一个事件处理程序，监听按钮的单击事件。可以使用jQuery的on()方法来实现事件委托。例如，如果父元素的id为"parent"，可以使用以下代码来添加事件处理程序：

$('#parent').on('click', 'button', function() {
  // 处理按钮的单击事件
});

在事件处理程序中，可以通过$(this)来获取被点击的按钮元素。然后可以对按钮进行相应的操作。

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>使用jQuery向innerHTML创建的按钮添加单击行为</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="parent">
    <!-- 使用innerHTML创建的按钮 -->
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
  </div>

  <script>
    $('#parent').on('click', 'button', function() {
      // 处理按钮的单击事件
      alert('按钮被点击了！');
    });
  </script>
</body>
</html>

在上面的示例中，我们给父元素"parent"添加了一个事件处理程序，监听按钮的单击事件。无论是通过innerHTML还是其他方式创建的按钮，只要它们是"parent"的子元素，点击时都会触发事件处理程序，并弹出一个提示框。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。

腾讯云云服务器（CVM）：提供弹性、安全、稳定的云服务器，可满足各种规模和业务需求。详情请参考腾讯云云服务器。
腾讯云云函数（SCF）：无需管理服务器，按需运行代码的事件驱动型计算服务。可用于处理各种事件，包括HTTP请求、定时触发、对象存储事件等。详情请参考腾讯云云函数。

相关搜索:Jquery使用类在单击时附加按钮 jquery版本1.11.1:单击使用append()创建的不工作按钮使用jQuery单击按钮时无法显示输入中的文本使用jQuery在按钮点击时添加声音使用jquery将单击按钮时的文本添加到简单表单使用JQuery时按钮不响应单击使用jQuery查找和替换按钮单击时的颜色使用JS或Jquery向动态创建的元素添加事件使用单选按钮时无法更改innerHTML 单击enter按钮时，使用jQuery触发按钮单击

相关搜索:

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

有帮助

没帮助

相关·内容

第51次文章：JQuery高级

:先慢中间快，最后又慢 linear：动画执行时速度是匀速的 fn：在动画完成时执行的函数，每个元素执行一次。...; } }) 三、事件绑定 1、jquery标准的绑定方式 jq对象.事件方法（回调函数）；【注】如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。...1、$.fn.extend(object) 增强通过Jquery获取的对象的功能，属于对象级别的插件，例如：$("#id") 我们用一个案例来展示一下插件的使用。如下案例所示： //使用jQuery插件给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框 //1.定义jQuery的对象插件...插件，在插件里面定义了两个方法，分别是check()和uncheck(),然后再给两个单击按钮绑定不同的方法事件。

3.6K3 0

JQuery从入门到实战

("div"); alert(jsDiv.innerHTML); //alert(jsDiv.html()); JS对象无法使用jQuery里面的功能 // 将 JS 对象转换为jQuery对象 let...方式，通过id属性值获取div元素 let jqDiv = $("#div"); alert(jqDiv.html()); // alert(jqDiv.innerHTML); jQuery对象无法使用...JS里面的功能 // 将 jQuery对象转换为JS对象 let js = jqDiv[0]; alert(js.innerHTML); 2.2、事件的基本使用常用的事件在 jQuery 中将事件封装成了对应的方法...绑定事件 //jQuery 对象.on(事件名称,执行的功能); //给btn1按钮绑定单击事件 $("#btn1").on("click",function(){ alert("点我干嘛?")...操作对象 $(“元素”)：创建指定元素。 append(element)：添加成最后一个子元素，由添加者对象调用。 prepend(element)：添加成第一个子元素，由添加者对象调用。

15.3K3 0

Ajax与jQuery异步加载数据

由于用 jQuery 实现 ajax 比较简单，因此接下来的代码引用jQuery库实现Ajax，另外使用Django作为框架。其中jQuery可以手动下载放到本地文件夹中，也可以引用下面的语句。...也可以使用document.getElementById(“demo”).innerHTML = ret;来展示数据。 <!...一个被完整读入的页面与一个已经被动态修改过的页面之间的可能差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。...不过开发者已想出了种种办法来解决这个问题，HTML5之前的方法大多是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。...（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态）。

10.9K2 0

easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

可以使用$.parser.parse();这个方法进行处理；例如： $.parser.parse(); 表示对整个页面重新渲染，渲染完就可以看到easyui原来的样式了； var targetObj...input name='mydate' class='easyui-datebox'>").appendTo("#id"); $.parser.parse(targetObj); 表示重新渲染某个特定的组件

2.9K0 0

解决使用@Scheduled创建任务时无法在同一时间执行多个任务的BUG

(); taskScheduler.setPoolSize(50); return taskScheduler; } 如果没有指定TaskScheduler则会创建一个单线程的默认调度器...因此问题就清楚了，需要自己创建一个TaskScheduler。

1.7K2 0

JavaWeb——JQuery之高级操作应用及实践案例总结（动画、遍历、事件绑定）

2 JQuery遍历 js的遍历方式是使用for循环，JQuery提供了三种遍历方式： 1）JQuery对象.each(callback)：回调函数中的参数 index（索引） element（元素对象...事件绑定 JQuery事件绑定方式包括： 1）JQuery标准的绑定方式：JQuery对象.事件方法（回调函数）；注意：如果调用事件方法，不传递回调参数，会触发浏览器默认行为； 2）on绑定事件、off...，当点击对应组件时，会执行fn1，再次点击会执行fn2...，若只有2个，则循环执行。注意：JQuery1.9后该功能删除了，要使用的话引入jquery-migrate-1.0.0.js插件。..."> $(function () { //1.使用on给按钮绑定单击事件 click $("#btn").on("click",function...使用off解除btn按钮的单击事件 $("#btn2").click(function () { //解除btn按钮的单击事件

9.4K2 0

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

如果你使用过 jQuery，那你就知道 .one() 的功能。...} 单击按钮时，将使用两个传入值进行运算。...，然后使用按钮将其添加到文档中。...() 时，可能需要防止函数调用中出现默认浏览器行为。...; } }, false); 演示中的每个按钮都将以按钮文本描述的方式响应，并将显示一条显示当前单击计数的消息。

1.4K1 0

阻止a标签的默认事件及延伸

看如下实例： (1)把单击事件处理程序注册到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。...当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。...，而是用jQuery的话则既阻止默认行为又防止对象冒泡。...1 //jQuery，既阻止默认行为又停止冒泡 2 $("#testA").on('click',function(){ 3 return false;//当然也阻止了事件本身 4 }); 总结使用方法

2.4K6 0

前端成神之路-WebAPIs03

能够使用事件对象取消默认行为能够使用事件对象阻止事件冒泡能够使用事件对象获取鼠标的位置能够完成跟随鼠标的天使案例 1.1....DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 ? 当时的2大浏览器霸主谁也不服谁！...键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。事件对象的使用事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。...阻止默认行为 html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。

2.9K2 0

「Web编程API」- 03

行里面创建单元格td 单元格的数量取决于每个对象里面的属性个数 // 使用for in遍历学生对象 for (var k in datas[i]) { // 创建单元格...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。当时的2大浏览器霸主谁也不服谁！...DOM 事件流会经历3个阶段：捕获阶段当前目标阶段冒泡阶段我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡...键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。事件对象的使用事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。

1.4K5 0

Web阶段：第五章：JQuery库

Jquery 的初体验需求：使用Jquery和javascript给一个按钮绑定单击事件注意：使用Jquery之前要将第三方jar包导入 <!..."); } } //使用Jquery给一个按钮绑定单击事件，Jquery中的$()代替window.onload...1、使用jquery一定要引入jquery库吗？答案：是2、jquery中的到底是什么？答案：核心函数3、怎么为按钮添加点击响应函数的？...2、传入参数为 [ HTML 字符串 ] 时：(“我是span标签”); 创建一个标签对象相当于如下代码：var spanObj = document.createElement(“span”);spanObj.innerHTML...()查询出来的标签对象是Dom对象 4.通过createElement() 方法创建的对象，是Dom对象 JQuery对象 5.通过JQuery提供的API创建的对象，是JQuery对象。

26.1K2 0

JQuery的学习

JQuery对象和JS对象区别与转换： 1.JQuery对象在操作时，更加方便； 2.JQuery对象和JS对象方法不通用； 3.两者相互转换： * JQuery --> JS : JQuery...3.3.1.min.js"> //给b1按钮添加单击事件...-3.3.1.min.js"> /*window.onload = function () { //给b1按钮添加单击事件...给结束按钮绑定单击事件 $("#stopID").click(function () { //处理按钮是否可以使用的效果...//使用jquery插件给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框 //定义jquery对象插件： $.fn.extend

16.5K2 0

02-老马jQuery教程-jQuery事件处理

],fn]) $("p").blur(); 当元素失去焦点时触发 blur 事件，这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。...标签放到省的select下面 // jQuery的html方法已经对ie8的 select设置innerHTML的bug做了相关处理。...这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）在选择元素上绑定一个或多个事件的事件处理函数。...// dom动态创建 // var domP = document.createElement('p'); // domP.innerHTML = "1234";

6.4K0 0

jquery对象和dom对象的相互转换

2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是 jquery对象。....innerHTML; 3、如何获取jQuery集合的某一项对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而...对于jquery对象只能使用 jquery的方法，而dom对象只能使用dom的方法，如要获取第三个元素的内容。...$("#msg").click(fn); //为id为msg的元素单击事件添加函数同样blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能对于jquery...随后的每次点击都重复对这两个函数的轮番调用。 //每次点击时轮换添加和删除名为selected的class。

3.3K4 0

JS事件篇

document.createElement()---创建元素节点对象 document.createTextNode()---创建文本节点父节点.appendChild()----向一个父节点中添加一个子节点....removeChild(子节点)：删除子节点使用innerHTML也可以完成DOM的增删改操作阻止a标签默认行为的常用三种方式 a标签的索引问题 JS修改元素的样式读取元素的内联样式获取当前元素显示的样式.../html> ---- Dom查询 ---- innerhtml ----获取节点的html内容，或者设置对应节点html内容 innerHTML在JS是双向功能：获取对象的html内容或向对象插入...)—创建文本节点 ---- 父节点.appendChild()----向一个父节点中添加一个子节点 ---- 整合上面操作的小案例 <!...u1.replaceChild(li,l1); ---- 父节点.removeChild(子节点)：删除子节点 ---- 使用innerHTML

12.6K1 0

Web Components是不是Web的未来

已经完成了在页面中添加了自定义插件，但是浏览器无法确定自定义组件的生命周期，如果通过以下方式声明则使自定义组件生命周期变得清晰了。...('div') 添加带有属性的HTML标签： // 创建带有属性的input标签......，但是查看源码时你会发现只有空白的标签而已。这里使用创建Shadow Root 方法替代了直接修改页面。...添加“轻量级DOM” 目前为止，我们的自定义组件是空标签，但是如果向其中添加内部组件会出现什么现象呢？我们假设自定义组件包含的节点如下，这是一个轻量级 DOM。...Shadow DOM 是我们可以任意修改Web组件中的标签。在例子中，我们设置了“World”的样式，但是使用者却无法判断它是标签。

1.9K7 0

脚本语言知识总结.

JavaScript是基于对象，写Js，不用创建类，使用Js内部已经定义好的对象。...DOM 创建节点：document对象提供createElement() 创建元素、createAttribute(name) 创建属性、createTextNode() 创建文本节点 DOM 添加节点...2.Ajax快速入门 ①：开发步骤 1).创建XMLHttpRequest对象 2).将状态触发器绑定到一个函数 3).使用open方法建立与服务器的连接 4).向服务器端发送数据 5).在回调函数中对返回数据进行处理...(0); dom2.innerHTML = "传智播客ITCAST"; }); hello jQuery对象无法使用...DOM对象属性方法，DOM对象也无法使用jQuery对象属性方法。

5K13 0

在 jQuery Mobile 中使用 UI 组件

点击它时，将显示完整的内容，并且 + 图标将变成一个 - 图标，表示按钮可以被再次点击以关闭完整的内容，并回到默认的按钮状态。创建简单的列表列表是在移动网站上能看到的一个常用元素。...增强列表在您明白创建基本列表有多简单后，您可能就会想要更多选项。对列表提供更多功能的一个选项称为拆分按钮列表。拆分按钮列表使您能够在同一个列表项中提供两个可单击的选项。...创建一个拆分按钮列表很简单：在使用 listview data-role 的一个列表项中添加两个彼此相邻的定位点标记（清单 7）。清单 7....在这种情况下，您就会有一个长列表，它看起来几乎是无法使用的，而搜索筛选器栏就是处理该问题的一个很好的方式。很幸运，使用 jQuery Mobile 将搜索筛选器栏添加到列表中并不需要花很大功夫。...在某些情况下，您只需要用几行简单的 HTML，就可以包括一个可以向您网站添加值的移动 UI 组件。

8K2 0

《JavaScript 模式》读书笔记（8）— DOM和浏览器模式1

通常将使用代理嗅探这种方法看作一种反模式。有时候这是不可避免的，但是应该在使用特性检测技术无法获得确定性结论时（或者会导致极大的性能损失时），不得已才使用代理嗅探。...下面将介绍如何不立即添加节点： // 反模式 // 在创建时立即添加节点 var p,t; p = document.createElement('p'); t = document.createTextNode...事件处理通常事件处理是通过为元素附加事件监听器来实现的，例如有一个按钮，该按钮在每次单击后都会增加一次计数。...= "Click me: " + count; } 　　如果希望在一次单击后执行多个函数功能，仍然维持采用现在的松耦合模式是无法做到的。...让我们假定有多个按钮，并且这些按钮共享同一个myHandler()函数。考虑到可以从每次点击时创建的事件对象中获取数值，因此为每个数值维持按钮节点和计数器之间引用是十分低效的。

8943 0

《JavaScript 模式》读书笔记（8）— DOM和浏览器模式1

通常将使用代理嗅探这种方法看作一种反模式。有时候这是不可避免的，但是应该在使用特性检测技术无法获得确定性结论时（或者会导致极大的性能损失时），不得已才使用代理嗅探。...下面将介绍如何不立即添加节点： // 反模式 // 在创建时立即添加节点 var p,t; p = document.createElement('p'); t = document.createTextNode...事件处理通常事件处理是通过为元素附加事件监听器来实现的，例如有一个按钮，该按钮在每次单击后都会增加一次计数。...= "Click me: " + count; } 　　如果希望在一次单击后执行多个函数功能，仍然维持采用现在的松耦合模式是无法做到的。...让我们假定有多个按钮，并且这些按钮共享同一个myHandler()函数。考虑到可以从每次点击时创建的事件对象中获取数值，因此为每个数值维持按钮节点和计数器之间引用是十分低效的。

8362 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭