首页
学习
活动
专区
工具
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   接下来一个片段中第二个范例是更好使用方法(使用了局部变量风格),尽管其需要额外一横代码和一个变量...具体方法是:为需要修改子树根节点建立一个克隆景象,然后对该克隆景象做所有的修改操作操作,在完成修改操作后用克隆镜像替换原来子树。...事件处理 通常事件处理是通过为元素附加事件监听器来实现,例如有一个按钮,该按钮在每次单击后都会增加一次计数。...这是十分方便,因为当事件在关注节点之外发生时,回调事件函数实际并没有被调用。

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

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

    85720

    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.5K71

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

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

    1.2K30

    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

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

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

    1.4K10

    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

    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

    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

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

    看如下实例: (1)把单击事件处理程序注册到一个锚元素,而不是一个外层,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键时,会触发表单submit事件,在此事件发生后,表单提交才会真正发生。 这种行为与我们讨论事件处理程序不是同一个概念,它是单击标签元素默认操作。...在这种情况下,处理方法有: 1、w3c方法是e.preventDefault(),IE则是使用e.returnValue = false; preventDefault它是事件对象(Event)一个方法...//仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 形式组织事件宿主默认行为。...1 //jQuery,既阻止默认行为又停止冒泡 2 $("#testA").on('click',function(){ 3 return false;//当然 也阻止了事件本身 4 }); 总结使用方法

    2.5K60
    领券