首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

尽管使用了$(document).on(' Click ','.foo',function)方法,但克隆元素上的单击事件仍不起作用

尽管使用了$(document).on('click', '.foo', function)方法,但克隆元素上的单击事件仍不起作用。

这个问题的原因是因为在使用$(document).on('click', '.foo', function)方法时,它是通过事件委托的方式来绑定事件的。也就是说,当点击的元素匹配选择器'.foo'时,事件会冒泡到document对象上,然后再触发绑定的事件处理函数。

但是,当我们克隆一个元素时,克隆出来的元素并不具有之前绑定的事件处理函数。因此,即使克隆元素的选择器与之前绑定事件的选择器相同,但事件处理函数并没有被继承过来,所以克隆元素上的单击事件不起作用。

解决这个问题的方法是,在克隆元素后,重新绑定事件处理函数。可以使用以下代码来实现:

代码语言:txt
复制
var clonedElement = $('.foo').clone();
clonedElement.on('click', function() {
  // 事件处理逻辑
});

这样,克隆元素上的单击事件就会起作用了。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

腾讯云云服务器(CVM)是一种可随时扩展的云计算服务,提供了高性能、可靠稳定的云服务器实例。您可以根据业务需求选择不同的配置,包括计算、存储、网络等资源,满足您的应用程序和服务的需求。

产品介绍链接地址:腾讯云云服务器(CVM)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

请看如下范例,尽管第二种方式循环语句更长,但针对不同的浏览器,它会比第一种方法快上几十倍到几百倍。...} document.getElementById("result").innerHTML = content   接下来的一个片段中第二个范例是更好的使用方法(使用了局部变量风格),尽管其需要额外的一横代码和一个变量...具体方法是:为需要修改的子树的根节点建立一个克隆景象,然后对该克隆景象做所有的修改操作操作,在完成修改操作后用克隆镜像替换原来的子树。...事件处理 通常事件处理是通过为元素附加事件监听器来实现的,例如有一个按钮,该按钮在每次单击后都会增加一次计数。...这是十分方便的,因为当事件在关注的节点之外发生时,回调事件函数实际上并没有被调用。

91430
  • 《JavaScript 模式》读书笔记(8)— DOM和浏览器模式1

    请看如下范例,尽管第二种方式循环语句更长,但针对不同的浏览器,它会比第一种方法快上几十倍到几百倍。...} document.getElementById("result").innerHTML = content   接下来的一个片段中第二个范例是更好的使用方法(使用了局部变量风格),尽管其需要额外的一横代码和一个变量...具体方法是:为需要修改的子树的根节点建立一个克隆景象,然后对该克隆景象做所有的修改操作操作,在完成修改操作后用克隆镜像替换原来的子树。...事件处理 通常事件处理是通过为元素附加事件监听器来实现的,例如有一个按钮,该按钮在每次单击后都会增加一次计数。...这是十分方便的,因为当事件在关注的节点之外发生时,回调事件函数实际上并没有被调用。

    86720

    50个必备的实用jQuery代码段

    jQuery 判断元素上是否绑定了事件 //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var $events = $("#foo").data("events...}); 如何把函数绑定到事件上: //方法一 $('#foo').click(function(event) {   alert('User clicked on "foo."'); });...//方法二, 支持动态传参 $('#foo').bind('click', {test1:"abc", test2:"123"}, function(event) {   alert('User clicked...*包含了对这一has方法的支持。 //该方法找出某个元素是否包含了其他另一个元素类或是其他任何的你正在查找并要在其之上进行操作的东东。...它存在…… } 如何使用jQuery来检测右键和左键的鼠标单击两种情况: $("#someelement").live('click', function(e) { if( (!

    6.7K00

    如何制作自己的原生 JavaScript 路由

    但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢? 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...这就是使浏览器无需重新加载页面即可更改 URL 的原因。 结果:现在,每次我们单击按钮时,URL 实际上都会在浏览器的地址栏中更改。内容框也会更新。 ? 我们的原生 JS 路由开始运行了。...这取决于你的程序。可以是任何东西。 使“后退”和“前进”按钮起作用 通过使用 history.pushState,你将自动使 Back 和 Forward 按钮导航到上一个或下一个状态。...但是由于该事件带有单击的 id,因此单击 Back 或 Forward 时很容易刷新视图并重新加载内容。...但这就是它在客户端上的工作方式。 初始化服务器端的路由负载 将它们放在一起还需要再执行一个步骤。在我的例子中,只用了 router.html。

    3.9K20

    一个小时学会jQuery

    从上面的调试信息中可以看到$foo是一个长度为1的集合,集合中下标为0的元素就是1个DOM元素(0:p#foo),上DOM示例中的foo对象完全一样;可以看出$foo是对DOM元素foo的封装,使用功能更加强大...转换方法一: 使用工厂方法jQuery(DOM对象),如jQuery(document.getElementById("foo")),$是jQuery方法的简写形式,也可以写成$(document.getElementById...、DOM复制 $("p").clone()   //克隆节点并选中克隆的副本 $("p").clone(true) //布尔值指事件处理函数是否会被复制 4.17、DOM加载完成事件 $(document...$("p").delegate("click",function(){ 您的代码 }); $("p").undelegate();    //p节点删除由 delegate() 方法添加的所有事件...$("p").undelegate("click") //从p节点删除由 delegate() 方法添加的所有click事件 $("p").click();   //单击事件 $("p").dblclick

    18.6K71

    jQuery中on()、bind()、live()、delegate()之间的区别

    事件冒泡 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。...click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。 ? 在操纵DOM的语境中,document是根节点。...; }); 当我们在a 上面点击的时候,首先会触发它本身所绑定的click事件,然后会一路往上,触发它的父元素,祖先元素上所有绑定的click事件。...和.bind()相比的时候有一个好处就是我们不需要在每个元素上再去绑定事件,而只在document上绑定一次就可以了。尽管这个不是最快的方式,但是确实是最少浪费的。...data来决定那个子元素来匹配,但是因为你可以决定放在那个根元素上,所以可以有效的减小你所要查找的元素 可以用在动态添加的元素上 缺点 需要查找那个那个元素上发生了那个事件了,尽管比document少很多了

    1.3K30

    javascript事件流的原理

    典型的例子有:页面加载完毕触发load事件;用户单击元素,触发click事件。 二、事件流 事件流描述的是从页面中接收事件的顺序。...1、事件流感性认识 问题:单击页面元素,什么样的元素能感应到这样一个事件? 答案:单击元素的同时,也单击了元素的容器元素,甚至整个页面。...例子:有三个同心圆, 给每个圆添加对应的事件处理函数,弹出对应的文字。单击最里面的圆,同时也单击了外面的圆,所以外面圆的click事件也会被触发。... 上面这段html代码中,单击了页面中的 元素, 在冒泡型事件流中click事件传播顺序为 —》—》—》document 在捕获型事件流中click事件传播顺序为...尽管DOM标准要求事件应该从document对象开始传播,但这些浏览器都是从window对象开始捕获事件的。 3)、由于老版本浏览器不支持,很少有人使用事件捕获。建议使用事件冒泡。

    1K10

    jQuery中常用的函数和属性详细解析

    例子: $(document).ready(function(){alert("aa");} bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数....bind("click", {foo: "bar"}, handler) one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。...; triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动 unbind( [type], [data...$("p").unbind() 移除所有段落上的所有绑定的事件 $("p").unbind( "click" ) 移除所有段落上的click事件 例子: 复制代码代码如下: var foo = function...() { // 处理某个事件的代码 }; $("p").bind("click", foo); // ...

    2.6K10

    前端成神之路-WebAPIs03

    eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。 ?...eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象) 上,当该对象触发指定的事件时,指定的回调函数就会被执行。 ?...DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。...那么是先执行父元素的单击事件,还是先执行div的单击事件 ??? ?...document注册单击事件,第3个参数为true document.addEventListener('click', function() { alert('

    3K20

    浅谈JavaScript的事件(事件处理程序)

    例如,在单击按钮的时候执行一些JavaScript代码。 ...上面的例子上,如果divClick函数定义在div的下方,我们在函数尚未解析之前,就点击div,这样就会导致报错。   另一个缺点是,这样的事件处理程序的作用域链在不同的浏览器中会导致不同结果。...,但是并没有起作用。...("click",callback,false);   上面的代码中,我们在addEventListener和removeEventListener中调用的是同一个方法,所以元素aa已经没有点击事件。...在第25行获取元素对象引用,26行定义了fn函数,30行调用addEvent添加了事件处理程序。这个事件处理程序只能执行一次,因为我们在func函数中又调用了removeEvent函数。

    1.5K50

    JavaScript 中 10 个需要掌握基础的问题

    1.如何从数组中移除一个特定的项 思路:首先,使用indexOf查找要删除的数组元素的索引(index),然后使用splice方法删除该索引所对应的项。...; i--) { if (array[i] === number) { array.splice(i, 1) } } 如果你只想使索引i处的元素不再存在,但又不想更改其他元素的索引: delete...另一种引用自身的方法是arguments.callee,这种写法也相对较长,并且在严格模式中不受支持。 实际上,JavaScript对待这两个语句是不同的。.../ 也可以在这里调用 abc(); 此外,尽管有 return 语句,也可以提升: // 我们可以在这里调用 abc(); return; function abc(){} 下面是一个函数表达式:...当deep标志设置为false(浅克隆)时,jQuery.extend非常快。 这是一个不错的选择,因为它包括一些用于类型验证的额外逻辑,并且不会复制未定义的属性等,但这也会使你的速度变慢。

    2.7K20

    【Web前端】系统中正在发生的“事件”

    这可以是单个元素、一组元素、当前加载的HTML文档,或整个浏览器窗口。各种类型的事件都有可能发生。 例如: 用户选择、点击或将光标悬停在某个元素上。 用户按下键盘上的某个键。...尽管从严格意义上讲,这段代码既监控又处理事件,但监听器主要关注事件的发生,而处理器则负责对事件采取相应的行动。 处理点击事件 假设用户在网页上单击一个按钮,我们希望在用户单击时显示一条消息。...添加事件监听器 使用 ​​addEventListener()​​方法来添加事件监听器,可以接受三个参数: 事件类型(字符串,例如 ​​'click'​​)。 事件处理函数。...这种方法虽然有效,但并不推荐使用,它会使代码的结构较为混乱。 点击我!...事件对象的额外属性 以下是一些常用的事件对象属性: ​​target​​:事件的目标元素。 ​​type​​:事件的类型(例如 ​​click​​)。 ​​

    7510

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

    ('click',doSomething,false); 第一个元素是我们要监听的事件,第二个元素是事件触发时的回调函数,第三个参数是一个布尔值用来标识事件在捕获还是冒泡阶段触发。...但请注意以下几点: 我必须调用其中一个文本节点上的 wholeText ,而不是元素(因此代码中的el.childnodes[0] ;el.childnodes[1]也可以工作) 文本节点必须是相邻的,...afterend: 插入元素之后 事件详细信息 如前所述,事件使用熟悉的 addEventListener() 方法添加到网页上的元素。...要求将事件传递到函数中,因为调用了 preventDefault() 方法。 但是你可以用那个 event 对象做更多的事情。...事实上,当使用某些事件(例如 click、 dbclick 、mouseup、mousedown )时,这些事件称为 uievent 接口的内容。

    1.5K10

    jq---方法总结

    (); // 删除$A,但保留其绑定的事件、附加数据等 $A.clone(); // 克隆一个$A 九:动画处理 $("selector").show(); // 显示隐藏的元素,默认不带过渡动画效果...mouseover()、移动至元素的时候 keydown()、键盘按下的时候 keypress() 键盘起来的时候 :手机端的事件 // 触发所有匹配元素上的click事件 $("selector")....trigger("click"); // 触发所有匹配元素上的change事件 $("selector").trigger("change"); // 触发所有匹配元素上绑定在foo命名空间下的mouseout...事件的处理函数 $("selector").trigger("mouseout.foo"); :移除事件 //主要用于解除通过click()、dblclick()等直接事件方法以及bind()、one(...delegate()方法绑定的处理函数 $(document).undelegate("selector", "click"); //主要用于解除通过on()方法绑定的处理函数 $("selector"

    3K20

    JavaScript强化教程——jQuery 核心

    例如,如果我们希望在一个 callback 中搜索一个元素,可以限定下面的搜索:实例 $("div.foo").click(function() { [code]$("span", this) .addClass...该功能通常的用法是,对已经通过 this 关键字传递到 callback 函数的元素调用 jQuery 的方法:实例 $([code]"div.foo" ).click(function() { $(this...但如果字符串是 HTML 片段,则 jQuery 试图创建由该 HTML 片段描述的 DOM 元素。...此外,可以传递任意的事件类型,并可以调用下面的 jQuery 方法:val, css, html, text, data, width, height, or offset....尽管从技术上来说,这个函数是可链接的,但真正以这种方式链接的情况并不多。例子 当DOM加载完成后,执行其中的函数: $(function(){ // 文档就绪 });

    1.1K20

    100个最常问的JavaScript面试问答-第2部分(共10部分)

    答: 当事件发生在DOM元素上时,该事件并不完全发生在那个元素上。...3.Bubbling Phase –事件从目标元素冒泡,然后上升到每个元素,直到到达窗口。 问题15.什么是事件冒泡? 答: 当事件发生在DOM元素上时,该事件并不完全发生在那个元素上。...如果单击子元素,它将child, parent, grandparent, html, document 和window分别记录在控制台上。 这整个事件是事件冒泡。 问题16.什么是事件捕获?...答: 当事件发生在DOM元素上时,该事件并不完全发生在那个元素上。 在捕获阶段,事件从窗口开始一直到触发事件的元素。...当event.stopPropagation()方法停止事件的传播时。 它阻止了事件在冒泡或捕获阶段发生。 问题18.如何知道是否在元素中使用了event.preventDefault()方法?

    1.1K31

    Jquery入门基础教程免费版

    Click事件 3.1 jQuery基础事件 3.1.1 鼠标事件 方法 描述 执行时机 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的...(){ //选择器,on();之前写的是都是方法名(function(){}) //on("事件名",function(){}) //相当于把click,单击事件绑定到匿名函数了...(){ //在按钮上单击的时候,进行操作; $("#app").click(function(){ //1.删除节点的操作;删除某个节点:现在要删除艾泽拉斯; //$...(){ //在按钮上单击的时候,进行操作; $("#app").click(function(){ //来获取一下src,这个图片的路径信息;好处:可以得到路径信息,...(){ //在按钮上单击的时候,进行操作; /* $("#app").click(function(){ //当我们在这个按钮上进行单击的时候,逐个获取li的信息内容

    10210
    领券