当前位置: 首页 > 编程笔记 >

jquery html动态添加的元素绑定事件详解

高鸿振
2023-03-14
本文向大家介绍jquery html动态添加的元素绑定事件详解,包括了jquery html动态添加的元素绑定事件详解的使用技巧和注意事项,需要的朋友参考一下

在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况:

<div id="testdiv">
  <ul></ul>
</div>

假设我们要给ul动态添加的<li>绑定click事件形成如下结果

<div id="testdiv">
  <ul>

   <li name="apple">apple</li>
   <li name="pear">pear</li>

  </ul>
</div>
<script>

function test(name){
  alert("I'm "+name);

}

//做法如下:

$("#testdiv ul").on("click","li", function() {
  //test($(this).attr("name"));
  //do something here
});

//主动触发某个<li>的click事件

// $("#testdiv ul li[name='apple']").trigger("click");

</script>

以上这篇jquery html动态添加的元素绑定事件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍jQuery给动态添加的元素绑定事件的方法,包括了jQuery给动态添加的元素绑定事件的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。在1.7版本以前使用l

  • 问题内容: 我想将onclick事件绑定到我使用jQuery动态插入的元素 但是它从不运行绑定函数。如果您能指出此示例为何不起作用以及如何使其正常运行,我将不胜感激: 编辑:我编辑了该示例以包含方法插入到其中的两个元素。在这种情况下,将永远不会执行该调用。 问题答案: 第一个问题是,当您在具有多个元素的jQuery集合上调用append时,会为每个元素创建要添加的元素的克隆,因此丢失了附加的事件观

  • 问题内容: 我使用jquery fancybox 1.3.4作为弹出表单。 但是我发现fancybox无法绑定到动态添加的元素。例如,当我向当前文档中添加html元素时。 像这样:首先我使用jquery将一个元素附加到主体, 我叫fancybox, 但fancybox不适用于动态添加的元素。 我不能从此元素调用fancybox吗? 问题答案: 将fancybox(v1.3.x)绑定到动态添加的元素

  • 本文向大家介绍jQuery中dom元素上绑定的事件详解,包括了jQuery中dom元素上绑定的事件详解的使用技巧和注意事项,需要的朋友参考一下 作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的。比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台。。。 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧。 查看

  • 本文向大家介绍Angularjs 动态添加指令并绑定事件的方法,包括了Angularjs 动态添加指令并绑定事件的方法的使用技巧和注意事项,需要的朋友参考一下 这两天学习了angularjs 感觉指令这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: 如果用angularjs应该怎么实现呢?想当然的情况是这

  • 问题内容: 这个问题的答案是 社区的努力。编辑现有答案以改善此职位。它目前不接受新的答案或互动。 我有一些代码,在其中循环浏览页面上的所有选择框,并将事件绑定到它们上,以使它们的宽度变窄。 这在页面准备就绪时发生,并且工作正常。 我的问题是,在初始循环之后,我通过Ajax或DOM添加的所有选择框都没有事件绑定。 我已经找到了这个插件([jQuery Live Query Plugin](),但是在