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

On( ) click是针对jquery中最后一个附加的div而不是所有附加的div执行的

on() 方法在 jQuery 中用于绑定事件处理器到选定的元素。当使用 on() 方法时,可以选择绑定到特定的元素或者动态添加的元素。在你提到的情况中,on() 方法可能被用于绑定点击事件到一个动态添加的 div 元素上。

如果你发现 on() 方法只对最后一个附加的 div 执行,而不是所有的 div,这通常是因为事件委托的机制。在 jQuery 中,如果你在一个父元素上使用 on() 方法,并且指定了一个子元素的选择器,那么这个事件处理器会被绑定到父元素上,但是只有当事件是从匹配选择器的子元素触发时,事件处理器才会执行。

例如,如果你有以下代码:

代码语言:txt
复制
$('body').on('click', '.dynamic-div', function() {
    // 事件处理代码
});

这段代码意味着,无论何时点击 body 元素内的任何一个具有 .dynamic-div 类的元素,都会触发事件处理器。如果之后动态添加了多个 div,并且它们都有 .dynamic-div 类,那么点击任何一个这样的 div 都会触发事件处理器。

如果你只想对最后一个附加的 div 执行操作,你需要确保每次添加新的 div 时,都重新绑定事件处理器,或者使用更具体的选择器来确保只有最后一个 div 被选中。例如:

代码语言:txt
复制
function bindLastDivClick() {
    $('.dynamic-div').last().off('click').on('click', function() {
        // 只对最后一个 div 执行的操作
    });
}

// 每次添加新的 div 后调用这个函数
bindLastDivClick();

在这个例子中,每次调用 bindLastDivClick 函数时,都会先解绑之前绑定的点击事件(如果有的话),然后只对最后一个 .dynamic-div 元素绑定新的点击事件处理器。

如果你遇到的问题是因为事件委托没有正确设置,确保你的父元素选择器是正确的,并且子元素的选择器能够匹配到你想要绑定事件的元素。如果问题依旧存在,可能需要检查是否有其他的 JavaScript 代码干扰了事件处理器的正常工作。

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

相关·内容

4-Jquery学习四-事件操作

: "王五" }; //为div中的所有p元素的click事件绑定事件处理函数 //只有n2、n3可以触发该事件 $("div p").bind("click", function(){ // 这里的...同样以初始HTML代码为例,我们可以编写如下jQuery代码: // 为div中的所有p元素绑定click事件处理程序 // 只有n2、n3可以触发该事件 $("div").on("click", "p...2-triggerHandler()触发事件只针对jQuery对象中的第一个匹配元素。 3-triggerHandler()触发的事件不会在DOM树中冒泡,因此事件不会冒泡传递到它的任何祖辈元素。...4-triggerHandler()的返回值是对应事件处理函数的返回值,而不是当前jQuery对象本身。...这里介绍的load()是一个事件函数,jQuery中还有一个同名的Ajax函数load(),用于通过Ajax加载html文档内容。

4.5K90

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

第二,只触发jQuery对象集合中第一个元素的事件处理函数。 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。...], fn) 说明:jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。...要删除特定的委派事件处理程序,提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件,使用特殊值 "**" 。...event.currentTarget 在事件冒泡阶段中的当前DOM元素 event.delegateTarget 此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件,事件处理程序附加在正在处理的元素的祖先上...event.result 这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined event.which 针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。

6.5K00
  • 02-老马jQuery教程-jQuery事件处理

    fn的内部作用域中this指向当前的DOM对象(注意不是jQuery的包装对象) 返回值: jQuery的包装对象!!!...第二,只触发jQuery对象集合中第一个元素的事件处理函数。 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。..., fn) 说明:jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。...要删除特定的委派事件处理程序,提供一个selector 的参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加的选择器。要删除非委托元素上的所有事件,使用特殊值 "**" 。...event.result 这个属性包含了当前事件事件最后触发的那个处理函数的返回值,除非值是 undefined event.which 针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。

    2.7K80

    移除jQuery好像也没那么难

    jQuery 是一个非常实用且实用的库,但随着浏览器对 ES6 的广泛支持(截至撰写本文时超过 96%),现在可能是时候从 jQuery 过渡到原生 JavaScript 了。...选择元素 选择一个或多个 DOM 元素是 jQuery 最基本的功能之一。...或者选择所有 .box 的实例 document.querySelectorAll(".box"); 在选择中的所有元素上运行函数 querySelectorAll() 返回一个包含所有匹配查询元素的...// jQuery // 处理 .search-result 元素的点击事件,即使它们是通过编程动态添加到 DOM 中的 $(".search-container").on("click", ".search-result...(element); 综合起来,下面是如何创建一个 div 元素,更新其文本和类名,并将其添加到 DOM 中的示例: // 创建一个 div 元素 var element = document.createElement

    13610

    JavaScript 事件委托 以及jQuery对事件委托的支持

    真正做事情的是乙,即被委托人,而委托人甲 则是把相应的信息传递给被委托人乙,自己本该做的事情交给了乙来做,如下图这个例子: ?       那么在我们javascript 里,什么是事件委托呢?...type:     附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。...fn   : 相应的处理函数 描述:jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。...从元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)如果不带参数,则所有绑定的live事件都会被移除。...大多数的事件会冒泡,但是并不是所有的。对于其他的浏览器而言,捕获阶段也会同样适用。

    82860

    jq---方法总结

    什么是jQuery 在使用jQuery之前,我们必须先了解什么是jQuery,它能够干什么(不然我们为啥要用它)。 jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。...2.版本的区别 jQuery库的js文件一般有两个版本:一个是jquery-version.js(这里的version表示具体版本号,下同),一个是jquery-version.min.js。...class="foo bar">Hello CodePlayerdiv>'); // 包含一个临时的div元素,其内嵌一个子节点p元素 六:元素的筛选 // 以下方法都返回一个新的jQuery...$("ul li").last(); // 选取ul li中匹配的最后一个元素 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素 $("ul li").filter(":even...属性 find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象 children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象 $("selector

    3K20

    jQuery学习笔记

    jQuery初学者笔记 一 Mirror王宇阳 by jQuery语法 jQuery语法是通过选取HTML元素,并对选取的元素进行操作 基础语法: 所有jQuery语句用“$”符号开始 一个document ready函数中,我们需要在js中加载该函数文档 // jQuery入口函数 $(document).ready(function(){ //jQuery代码 }...、或将函数绑定到指定元素的 double click 事件 | |delegate() |向匹配元素的当前或未来的子元素附加一个或多个事件处理器 | |die() |移除所有通过...删除元素的class加载 empty() 删除被选元素的子元素 jQuery CSS 获取/设置 addClass() 向被选元素添加一个或多个Class类 removerClass() 从被选元素中删除指定的一个或多个...() 返回被选元素与参数之间的所有同级元素 遍历 过滤 first() 返回被选元素的首个子元素 last() 返回被选元素的最后子元素 eq() 返回被选元素中带有指定索引的元素(可选参数

    7.4K30

    Jquery的属性操作和DOM操作

    中offset和position的区别     JQ中的两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点在于位置的相对点不同。    ...删除所有子节点),绑定的事件,附加的数据都会移除         2 detach()从DOM中删除所有匹配的元素()与remove()不同的是,绑定的事件,附加的数据都会被保留下来        3...replaceAll():用指定的HTML内容或元素替换被选元素     3 each()遍历   过滤 first()/last()方法返回被选元素的首个元素/最后一个元素。...eq()方法返回被选元素中带有指定索引号的元素               索引号从0开始,因此首个元素的索引号是0而不是1          3  not()方法返回所有不匹配的元素          ...4 is()判断所有元素中是否有符合某个条件的元素,返回布尔值           5  has()方法返回拥有匹配指定选择器的一个或多个元素在其内的所有元素 演示文档</title

    1.4K20

    jQuery 基本语法

    示例解析: 上边的效果是点击文档中所有a标签时将弹出对话框(alert),其中,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click(...返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML index(...$("p").add(document.getElementById("a")); add(els)  在匹配对象的基础上在附加指定的一组对象,els是一个数组。 ?...:blue">cssdiv> 取它的background语法是 document.getElementById("a").style.background, 而jQuery对css更方便的操作,$(...5类 举例,click(fn) 扩展 click()  unclick()  oneclick(fn)  unclick(fn) click(fn):增加一个点击时触发某函数的事件 click():可以在其他事件中执行匹配对象的

    3.9K40

    jQuery 快速入门教程

    (); // 选取ul li中匹配的第一个元素 $("ul li").last(); // 选取ul li中匹配的最后一个元素 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素...上面我们提到的所有选取元素的方法,返回的并不是DOM元素(Element对象),而是jQuery对象,只是其中封装了所有DOM元素。...接下来我们进行DOM操作,也应该使用jQuery对象的方法,而不是Element对象的方法。当然,jQuery对象也可以转换为DOM元素,后面我们会提到。...$("div") // 返回一个匹配所有div元素的jQuery对象 .find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象 .addClass("menu") /...而attr()和prop()这两个方法,就是通用的属性获取或设置方法,不过attr()方法针对的是HTML文档节点的属性,prop()方法针对的是文档节点对应的DOM元素对象的属性。

    13.7K30

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    •-index:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。...事件,而不触发 和元素上的 click事件.当单击 元素时,只触发 元素上的click事件, 而不触发元素上的click事件....事件对象: 由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同 浏览器中获取事件对象变得比较困难.针对这个问题,jquery进行了必要的扩 展和封装,从而使得在任何浏览器中能很好的轻松的访问获取事件对象以及事...; event.stopPropagation();//停止冒泡事件 }) 当单击span元素时,只会触发span元素上的click事件,而不会触发 div元素和body元素的click事件....•由于同源策略,一般来说位于 server.example.com 的网页无法与不是 server.example.com 的服务器沟通,而 HTML 的 元素是一个例外。

    8.3K20

    jquery学习

    $(":checked") 所有被选中的 input 元素 jQuery 事件 下面是 jQuery 中事件方法的一些例子: Event 函数 绑定函数至 $(document).ready(function...触发或将函数绑定到被选元素的鼠标悬停事件 jQuery 事件方法 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发、或将函数绑定到指定元素的 blur 事件 change...事件 delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 die() 移除所有通过 live() 函数添加的事件处理程序。...jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!...jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 二 什么是jQuery对象?

    2.3K40

    jQuery基础--事件处理

    2. jQuery事件机制 JavaScript中已经学习过了事件,但是jQuery对JavaScript事件进行了封装,增加并扩展了事件处理机制。...//要给div注册一个委托事件,但是最终不是由执行,而是有p执行 //第一个参数:selector:事件最终由谁来执行。...下面的所有的p标签绑定事件 }); 缺点:只能注册委托事件,因此注册时间需要记得方法太多了 on注册事件 2.2. on注册事件(重点) jQuery1.7之后,jQuery用on统一了所有事件的处理方法...() { alert("呵呵哒"); }); //给div自己执行的 $("div").on("click", function () {...事件 off方式(推荐) // 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector).off("click"); 2.4.

    2.5K30

    JavaWeb(八)JQuery

    是浏览器自带对象,dom 对象只能调用dom 里面的属性和方法, 不能调用jQuery 对象里面的属性和方法 jQuery对象:jquery 对象是通过jQuery 包装页面上面的元素或者dom 而产生的一个新的...事件 click() 触发、或将函数绑定到指定元素的 click 事件 dblclick() 触发、或将函数绑定到指定元素的 double click 事件 delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器...event.result 包含由被指定事件触发的事件处理器返回的最后一个值。 event.target 触发该事件的 DOM 元素。...click 事件时执行。....is() 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。 .last() 将匹配元素集合缩减为集合中的最后一个元素。

    1.8K40

    JavaWeb18-jquery学习笔记(Java全栈开发)

    过滤 eq(index|-index):获取指定索引的元素.如果是正数,索引从0开始;若是负数,倒着数从1开始. first():第一个 last():最后一个 hasClass(...)..."#b2").click(function(){ $("div").first().css("backgroundColor","#f0f"); }); last():最后一个 // 最后一个可见的div元素" id="b3"/> $("#b3").click(function(){ //$("div:visible").last().css(...不包括浏览器默认的) 委派 live jQuery 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效,例如给A标签添加事件,之后再追加a标签都具有相同的事件。...")); } //div变化 function showDiv(){ //把第一个div滑出完成之后将其淡入到最后一个 $("div").first().slideUp(100,function(){

    6.8K90

    书写高质量jQuery代码的6条经验

    一、正确引用jQuery 尽量在body结束前才引入jQuery,而不是在head中。 借助第三方提供的CDN来引入jQuery,同时注意当使用第三方CDN出现问题时,要引入本地的jQuery文件。...二、优化jQuery选择器 高效正确的使用jQuery选择器是熟练使用jQuery的基础,而掌握jQuery选择器需要一定的时间积累,我们开始学习jQuery时就应该注意选择器的使用。...因为ID选择器和元素选择器是原生的JavaScript操作,而类选择器不是,大家顺便可以看下find context 区别,find() children区别。...,既可以将一个上下文参数传入jQuery,以限制它只搜索DOM中特定的一部分。...在之前的版本中 on() 就是 bind()。自从jQuery 1.7版本后,on() 附加事件处理程序的首选方法。

    1.3K90

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

    原生JavaScript 原生JavaScript主要有2种实现方式,第一种是在动态添加的html代码中添加oclick事件,然后传递一个唯一的参数来判断点击的是哪个,然后做相应的操作。...第二种是通过事件委托的原理进行处理,事件委托将一个 事件监听器实际上绑定到整个容器,然后每个列表项被点击就可以访问,这样效率更高。...该事件附加到staticAncestors应处理的元素的静态父级 ( )。 每次在此元素或后代元素之一上触发事件时,都会触发此 jQuery 处理程序。...然后处理程序检查触发事件的元素是否与您的选择器 ( dynamicChild)匹配。当匹配时,您的自定义处理程序函数将被执行。...尽管记住document可能不是最有效的选择。

    4K20
    领券