开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jQuery单击动态添加的元素

jQuery是一个快速、简洁的JavaScript库，可以简化HTML文档遍历、事件处理、动画效果等操作。它提供了丰富的API，使得开发者可以更加便捷地操作DOM元素、处理事件、发送AJAX请求等。

在jQuery中，要实现单击动态添加的元素的功能，可以使用事件委托的方式。事件委托是指将事件绑定到父元素上，通过事件冒泡的机制来处理子元素的事件。这样可以避免为每个动态添加的元素都绑定事件，提高性能和代码的简洁性。

具体实现步骤如下：

给父元素绑定单击事件：

$(父元素选择器).on('click', 子元素选择器, function() {
  // 处理单击事件的代码
});

在事件处理函数中，可以通过this关键字或event.target来获取被单击的动态添加的元素。

下面是一个示例代码，演示了如何使用jQuery实现单击动态添加的元素的功能：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <div id="container">
    <button id="addButton">添加元素</button>
  </div>

  <script>
    // 给父元素绑定单击事件
    $('#container').on('click', 'button.dynamic', function() {
      // 处理单击事件的代码
      alert('你单击了动态添加的按钮');
    });

    // 给添加按钮绑定单击事件
    $('#addButton').click(function() {
      // 动态添加一个按钮
      var $button = $('<button>').text('动态按钮').addClass('dynamic');
      $('#container').append($button);
    });
  </script>
</body>
</html>

在上述示例中，点击"添加元素"按钮会动态添加一个按钮，然后点击动态添加的按钮会弹出提示框。

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

腾讯云服务器（CVM）：提供弹性、安全、稳定的云服务器，可满足各种规模的应用需求。详情请参考：腾讯云服务器产品介绍
云函数（SCF）：无需管理服务器，按需运行代码的事件驱动型计算服务。可用于处理事件、定时触发任务等场景。详情请参考：云函数产品介绍

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

有帮助

没帮助

相关·内容

jQuery动态添加删除元素及内容

添加元素/内容：通过 jQuery ，可以很容易地添加新元素/内容。 ? 添加新的 HTML 内容，四种方法：可根据上面的图片来区分四种方法插入元素的位置。...."); jQuery prepend() 方法：在被选元素的开头插入内容（被选元素内）。...实例： $("#div").remove(); jQuery empty() 方法：删除被选元素的子元素。...实例： $("#div").empty(); 过滤被删除的元素： jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。...remove(); gt 是大于的意思，这里 0 意思是删除所有子元素，1就是删除第2个以后的子元素。

7K1 0

cssjshtml jquery向动态生成的元素添加事件

定义和用法 delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。...规定要附加事件处理程序的一个或多个子元素。 event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 data 可选。规定传递到函数的额外数据。...p.over { background: #ccc; } span { color: red; } Click me!

3.1K1 0

jQuery - 添加元素

通过 jQuery，可以很容易地添加新元素/内容。...---- 添加新的 HTML 内容我们将学习用于添加新内容的四个 jQuery 方法： append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after()...- 在被选元素之后插入内容 before() - 在被选元素之前插入内容 ---- jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部...实例 $("p").append("追加文本"); jQuery prepend() 方法 jQuery prepend() 方法在被选元素的开头插入内容。...实例 $("p").prepend("在开头追加文本"); 通过 append() 和 prepend() 方法添加若干新元素在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

2.6K2 0

jQuery实现动态添加和删除（点击按钮添加在页面添加和删除元素）

1：点击添加按钮弹出弹框，form表单可以填写相关的信息 2：点击保存按钮，相关信息会显示在界面的列表里 ? 3：鼠标滑动界面列表的标签，会出现删除按钮的图标，点击删除成功 ?...4：代码如下，可以根据需要自行修改（可能会有多余的代码，但是不会影响效果）添加</

7.2K2 0

jquery实现表格动态添加

//点击模糊查询触发 $(function(){ $("#query").click(function(){ var context = $("#context").val(); alert("您输入的内容为...success: function(data){ alert("数据库编辑成功"); $("#tab tr:not(:first)").empty(); query(); }}); } //添加方法...; $.get("testController/addModel",{div_id: div_, context: context }).done(function( data ) { alert("添加到数据库成功.../select> DIV值： DIV名称 DIV值数据库的表数据

3.3K5 0

javascript动态添加元素

大家好，又见面了，我是你们的朋友全栈君。 <!...() { var liElement = document.createElement(‘li’); //liElement.innerHTML = ‘这是新增的li...元素’; var labelElement = document.createElement(‘label’); var inputElement = document.createElement...id=”myid”> aa bb 动态添加标签

1.9K3 0

js 动态添加元素

该例子的样式用的是easyui的样式，看不懂只需把class="easyui-XXX" 删除即可 <div class="fitem" id="urls" style="margin-bottom:5px

19.6K1 0

jquery 用于操作动态元素的delegateon方法

delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。...在做项目中有很多由ajax动态生成的html标签，jquery对这些标签不会响应(selector).click(function.....查看资料有的推荐使用live方法，但live在jQuery1.7中就不再建议使用，在1.9中就给删除了，改用on方法取代live方法。...jQuery官方网站声称下面三行代码是等价的 (“.btn”).live(“click”, function(){ alert(“Goodbye!”)...; }); // jQuery 1.4.3+ 这里要特别注意：$(“.jk_table”)这个对应的元素必须不是动态生成的。版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。

2.9K2 0

jquery validate动态添加删除规则

项目中用到了jquery vilidate插件来校验，使用中遇到点小波折，这里跟大家分享一下，希望大家少走一些弯路。...很多使用手册里面都会提到最基本的validate()方法，这个在使用时一般不会出现问题，如果有些小伙伴不想输入完成后立即校验可以通过设置下面这几个属性： onkeyup:false,...onclick:false, onfocusout:false, ，下面言归正传，如何动态的添加或者删除规则，其实这个在使用手册中也有提到，但是很少有rules相关方法的demo，...我在这里只说一点：rules相关的方法是针对某个具体验证元素（比如某个input元素等），而不是像validate方法一样是针对整个form而言。

1.9K2 0

如何实现动态添加的元素添加点击事件

在页面开发过程中常常遇到需要动态添加元素，然后给这一元素绑定相关事件的情况，这种情况下一般需要给元素加上相关属性，然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢？...原生JavaScript 原生JavaScript主要有2种实现方式，第一种是在动态添加的html代码中添加oclick事件，然后传递一个唯一的参数来判断点击的是哪个，然后做相应的操作。...该事件附加到staticAncestors应处理的元素的静态父级 ( )。每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。...eventName, function(){} ); 可以替换为以下on()方法： $(document).on( eventName, selector, function(){} ); ---- 例如，如果您的页面使用类名动态创建元素...，dosomething您会将事件绑定到已经存在的父级（这是这里问题的核心，您需要绑定到存在的东西，不要绑定到动态内容），这可以（也是最简单的选项）是document.

3.8K2 0

原生js动态添加元素

大家好，又见面了，我是你们的朋友全栈君。原生js动态添加元素.../ul> var formId = document.getElementById("form"); // 创建元素...input var inputPhone = document.createElement("input"); // 设置input的属性...inputPhone.value = "请输入手机号码"; formId.appendChild(inputPhone); // js动态添加

6.8K2 0

python测试开发django-166.jQuery 使用append()动态添加div元素

前言在页面上动态添加div元素，比如用户在添加多个银行卡的时候，可以动态添加和删除div元素使用场景用户点添加按钮，能添加一项div,点删除按钮可以删除一项前端结合bootstrap实现 <...绑定添加和删除事件 clone() 复制一个元素 append() 在元素后面追加一个新的元素 remove() 移除元素 // 添加 $("#cards").on("click",...复制上一个div.panel var newObj = $("#cards>.panel-body>.panel:last-child").clone(); // append() 添加到元素后面

2.1K1 0

动态添加的html元素绑定事件的方法

避免先写了DOM操作，但是元素是动态加载的，所以点击不生效，比较好的方法有两个： 1、动态添加的时候加行内事件，比如onclick="funcName()" 在js中写好方法名对应的方法就可以了，如果绑定方法的元素太多...，可以考虑使用方法二； 2、jquery的on事件绑定 eg: on事件可以给动态添加的元素也绑定事件。...("aaa") let num = $(this).parents(".input-group").index(); console.log(num) }) 注意：on事件先是获取到父元素...，然后绑定到子元素上，父元素最好是已经存在的元素，而不是动态添加的。

3.4K4 0

javaScript动态添加Li元素「建议收藏」

DOCTYPE html> **javaScript动态添加Li元素**...li元素 js动态添加Li元素代码（方法1） var...Li元素代码（方法2） //方法2：用createElement创建li元素，再通过setAttribute设置元素属性，最后通过appendChild()方法添加在父元素的最后一个子节点上。...); span_1.innerHTML=text; li.appendChild(span_1); } //添加删除按钮及设置删除按钮的样式及添加点击事件...知识点：createElement创建元素，setAttribute设置元素属性，innerHTML设置元素值，appendChild添加元素，parentNode获取父节点（parentNode是W3C

2.2K2 0

原生JS动态添加、删除元素&内容

整理一下原生 js 添加及删除元素和内容的相关知识，供参考。... 刀是我拿的，人是我杀的一个容器，用来放添加的元素。一个button按钮，用来动态的操作DOM。...} 添加元素：在元素内添加内容：文本内容 innerText container.innerText = '追加的内容'; HTML内容 innerHTML container.innerHTML...H3标签'; 也可以用 += 的写法： container.innerHTML += '追加内容为H3标签'; 创建元素及内容，添加到页面中：创建元素 createElement...("h3");//创建一个html标签 ele.appendChild(text);//在标签内添加文字 container.appendChild(ele);//将标签添加到页面中删除元素：移除元素

27K4 0

JavaScript 学习-37.jQuery 添加删除替换元素

前言通过 jQuery，可以很容易地添加和删除元素。...添加元素添加元素主要用到四个方法 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容...规定替换被选元素的内容。已存在的元素不会被移动，只会被复制，并包裹被选元素。...replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序 replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用...replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点删除元素remove()和empty() 删除元素和内容

1.6K3 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

HTML-JavaScript动态添加元素appendChild

开始自学一下前端的基础知识，这里记录一下知识点，毕竟不熟，不记录很容易就忘记了。前端最佳的学习资料就是在MDN，没有之一。今天的目标是下面的页面： ?...元素 let textNode = document.createTextNode(arr[index]); //创建一个新的文本节点 div.appendChild...(textNode); //方法将一个节点添加到指定父节点的子节点列表末尾 div.style.color = "#fe7235"; div.style.lineHeight...所以头尾的分布区间只有其他数字的一半。...//所以这句代码就是获取0~5直接的随机整数 let index = Math.floor(Math.random() * arr.length + 0); 插入节点appendChild()--方法将一个节点添加到指定父节点的子节点列表末尾

1.9K2 0

jquery 动态添加一行数据，支持动态删除

简介： 1、隐藏一个模板； 2、使用clone方法； 3、修改clone后的代码；详细过程： 1、html代码 ...form-control" > 删除 2、jquery...; $del_tr.remove(); }); $('#tab_relInfors tbody').append($tr);//在table表动态添加...style="margin-left: 50px;margin-right: 28px;">增加 4、一个在原来产品基础上添加产品的添加...，主要功能是在原来的序号的基础上，序号动态增长，可以作为参考； //新增产品 addProductRow():any{ let thiss = this; var $protr

2.7K1 0

jquery1.9+获取append后的动态元素建议收藏

大家好，又见面了，我是全栈君 jquery 1.9+放弃了live,说是用on代替了！那么如果我们以前用live来获取jquery动态添加的元素，现在应该用on怎么写呢？...首先：然后，我使用append的方法: $(‘#one’).append(“test1”); 得到的结果是： test1 http://www.cnblogs.com/roucheng/ 现在，我想获取p里的值，如果我们直接用： $(“#two”).on...(“click”,function(data){ alert(data); }); 那么，是不会弹出窗口的!...需要改成这样的： $(“body”).on(“click”,”#two”,function(data){ alert(data); }); 真的！

8273 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭