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

当last也是动态创建的时候,如何让li动态单击呢?

当last也是动态创建的时候,可以通过事件委托的方式实现li的动态单击。

事件委托是指将事件绑定到父元素上,利用事件冒泡的机制,通过判断事件源来执行相应的操作。在这种情况下,可以将点击事件绑定到父元素上,然后通过判断点击的目标元素是否为li来执行相应的操作。

以下是一个示例代码:

HTML部分:

代码语言:txt
复制
<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JavaScript部分:

代码语言:txt
复制
var list = document.getElementById('list');

list.addEventListener('click', function(event) {
  var target = event.target;
  
  if (target.tagName === 'LI') {
    // 执行li的点击操作
    console.log('点击了li:' + target.textContent);
  }
});

在上述代码中,通过addEventListener方法将点击事件绑定到父元素ul上。当点击ul内的任意li元素时,事件会冒泡到ul元素,通过判断事件源的tagName是否为'LI',来确定是否点击了li元素。如果是,则执行相应的操作,例如在控制台输出li的文本内容。

这种方式可以适用于动态创建的li元素,无论是通过JavaScript动态创建还是通过后端渲染生成的。只需要将事件绑定到父元素上,无需为每个li元素单独绑定事件,提高了效率和代码的可维护性。

推荐的腾讯云相关产品:无

希望以上内容能够满足您的需求,如有其他问题,请随时提问。

相关搜索:如何将<form >标记动态添加到也是动态创建的ul的li项中如何自动单击()动态创建的元素如何在vuejs的动态路由菜单中单击获取li的值?如何让onclick移除动态创建的listview Android如何使动态创建的表行可单击如何为动态创建的文本视图设置单击功能?如何在wpf中创建通过读取xml文件动态创建的按钮的单击事件?如何在C# Windows Forms应用程序中动态创建按钮单击时更改动态创建的标签文本当<iframe>的内容动态变化时,如何让iframe的高度和宽度自动改变?创建包含动态数据透视表的存储过程时,如何让参数在动态数据透视表中工作?angular ionic -如何将单击事件添加到动态创建的div如何向c# wpf中的动态创建按钮添加单击处理程序(不创建对象)如何让在js中创建的div在点击动态创建的td后填满屏幕?如何让我的第一个<LI>标记在排序过程中动态变化时着色如何让Delphi序列化动态创建的控件以及附加到它们的事件?如何在单击按钮时从表格中提取动态创建的表格单元格的值?如何在追加之前检查最后一个动态创建的li元素是否已填充到ul中如何在django模板中以网格格式显示内容,当从数据库接收到动态数据列表的时候?当另一个动态创建的文本框(在同一用户表单上)的值发生更改时,如何更新动态创建的文本框的值在一个以动态方式添加行的表中,如何为Angular中的每一行创建不同的单击函数?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Web 性能优化:缓存 React 事件来提高性能

这是 Web 性能优化第三篇,上一篇在下面看点击查看: Web 性能优化: 使用 Webpack 分离数据正确方法 Web 性能优化: 图片优化网站大小减少 62% JavaScript中一个不被重视概念是对象和函数是如何引用...createAlertBox 内存中地址不会改变,这意味着 Button 不需要重新渲染,节省了处理时间并提高了应用程序渲染速度 但如果函数是动态修复(高级) 这里有个非常常见使用情况,在简单组件里面...,有很多独立动态事件监听器,例如在遍历数组时候: class SomeComponent extends React.PureComponent { render() { return...怎样才能解决这个难题输入记忆,或者简单地称为缓存。 对于每个唯一值,创建并缓存一个函数; 对于将来对该唯一值所有引用,返回先前缓存函数。 这就是我将如何实现上面的示例。...但点击 index 为 0 按钮 pizza 时候,它将会弹出 soda。这也是 React 建议不要使用数组索引作为 key 原因。 你点赞是我持续分享好东西动力,欢迎点赞!

2.1K20

那人Excel技巧好烂,他做1个小时,别人29秒搞定

位置也是非常不起眼,就在插入选项卡下,”数据透视表“旁边,因此创建表格方法就是选中一个数据区域,单击插入,单击”表格“,根据实际情况勾选”数据包含标题“,单击确定。...1s美化表格 只需一键搞定动态数据透视表技巧 数据透视表是Excel极其重要数据分析工具之一。对职场小白而言,初接触数据透视表都会他们惊喜不已。...然而,一般数据透视表却有如下这样问题:数据增加时,我们刷新数据透视表却得不到正确结果。请看下面的演示: ? 当我们增加源数据记录后刷新,结果却没有任何变化 我们又该怎么破?...很多职场老鸟会选择更改数据源而得到新结果,然而,如果每次源数据更新了都要都要去更新一次是不是很麻烦如何做到数据源变化时,数据透视表结果也跟着变化?答案就是建立动态数据透视表。...创建动态数据透视表最简单技巧 用了它,公式和格式“不请自来” 智能表格还有一个非常显著特点就是:公式和格式自动扩展,这是什么意思?下面咱们一一来看一下。

2.6K50
  • LR关联知识点详解

    换句话说,关联就是把脚本中某些静态值,用服务端返回动态、每次都不同数据来代替。 关联属于一种特殊参数化。 为什么要做关联?...若需要对session和cookie加深理解,可以参考本文《session与cookie区别详解》。 二、什么时候需要做关联 换句话说,如何找出要关联数据?...原则上,客户端某个请求是随着服务端响应而动态变化时候,我们就需要用到关联。(即脚本每次执行时都需要获得唯一标识地方就需要关联。简单地说,每一次执行时都会变动值,就有可能需要做关联。)...检查一下扫描结果,选择要做关联数据,然后单击“Correlation”按钮,逐次关联,或是单击“Correlate All” VuGen 一次就对所有的数据建立关联。...SaveLen:找到匹配项后,偏移量之后几个字元存储到参数中。此参数可有可无,默认值是-1,表示一直到结尾整个字符串都存入参数中。 怎么插入关联函数

    83830

    如何正确使用:has和:nth-last-child

    介绍:nth-last-child 这篇文章主要要素之一是:nth-last-child伪类。我们可以使用该选择器来模拟计算子元素。 来看看它是如何工作。我将尽可能用直白的话来解释。...不可能根据元素数量来设计父元素样式 想象一下,有5个或更多项时,我们需要为每个添加display: flex。我们不能用 :nth-last-child 伪类选择器来做这个。...动态标题布局 在下图中,我们有一个标题,导航项有4个或更多时,应该改变其布局。通过CSS :has和:nth-last-child,我们可以检测并改变布局。...通过组合CSS:has和:nth-last-child,我们可以创建一个切换CSS变量,它将被一个样式查询所检查。 首先,我将假设默认的卡片样式是水平。...如果我们想对容器本身进行样式设计?那么,这就是CSS :has变得强大地方。

    19330

    Web阶段:第五章:JQuery库

    2.显示全部内容时候,按钮文本为“显示精简品牌” 然后,小三角形向上。所有品牌产品为默认颜色。 3.只显示精简品牌时候,要隐藏卡西欧之后品牌,按钮文本为“显示全部品牌” 然后小三形向下。...// 点击时候卡西欧之后品牌,要么显示,要么隐藏 $("li:gt(5):not(:last)").toggle(); if ($("li:gt(...**bind()** 可以同时给标签绑定一个或多个事件 **one()** 给标签绑定只响应一次事件 **live()** live可以给匹配了选择器所有元素都绑定事件,哪怕这个元素是后面动态创建...事件冒泡是指,父子元素同时监听同一个事件。触发子元素事件时候,同一个事件也被传递到了父元素事件里去响应。 那么如何阻止事件冒泡?...我们重点关心是怎么拿到这个javascript事件对象。以及使用。 如何获取javascript事件对象

    26.2K20

    学习jQuery这一篇就够了

    注意:如果存在(不存在)就删除(添加)一个样式类 需求描述:单击按钮时候,隐藏 div,再次单击按钮时候,显示 div .hide { width: 100px; height...需求描述:为按钮添加单击事件,按钮单击时候,向控制台输出 “按钮被单击了” 按钮 $('button').on('click',function () {...需求描述:为 ul 下所有 li 添加单击事件,要求将该单击事件委托给 ul,单击 li 时,所对应 li 背景变为红色 1111 2222</...() : 去掉字符串左边空格 rightTrim() : 去掉字符串右边空格 如何实现?...扩展 jQuery 对象 给 jQuery 对象 添加 3 个功能方法: checkAll() : 全选 unCheckAll() : 全不选 reverseCheck() : 全反选 如何实现

    90850

    Python每日一练(21)-抓取异步数据

    项目实战:爬取国家药品监督管理总局中基于中华人民共和国化妆品生产许可证相关数据 在 Python每日一练(15)-爬取网页中动态加载数据 一文中笔者已经讲过如何爬取动态加载数据,本文在对其进行详细讲解...,就会导致页面加载非常缓慢,即使动态部分不发生异常,如果动态部分内容非常多,也会出现页面加载缓慢现象,尤其是在网速不快地方,非常人抓狂。...为了解决这个问题,有人提出了异步加载解决方案,也就是静态部分(HTML、CSS、JavaScript等)先以同步方式装载,然后动态部分再另外向服务端发送一个或多个异步请求,从服务端接收到数据后,再将数据显示在页面上...逆向工程 在上面已经模拟实现了一个异步装载页面,这里以这个程序为例进行分析,如果对这个程序实现原理不了解,那么应该如何得知当前页面的数据是异步加载?以及如何获取异步请求 URL ?...通过观察发现,详情页企业详情数据也是动态加载出来,该请求是 POST 请求,所有的 POST 请求 URL 都是一样,只有参数 id 值是不同。

    2.7K20

    如何使用谷歌浏览器 Chrome 更好地调试

    调试是编程基本组成部分,也是所有软件开发人员基本技能。 当你构建网站和应用程序时,你很快就会意识到调试会占用大量时间。...例如: const users = [ { first: "zhang", last: "san"}, { first: "li", last: "si", birthday...在 DOM 元素上添加断点(属性/模板更改) 有时你可能需要在有条件或动态更改 DOM 元素上放置断点或调试器。...创建代码片段可以在任何时候在任何网站上每个调试会话中通过单击按钮来执行,因为它会永久保存,直到手动删除。这可以节省你在每个页面测试中输入重复信息时间。...在 Chrome 中创建代码片段: 1.打开 DevTools 窗口并单击选项卡面板中“Sources”。 2.单击>>符号,选择“snippets”,然后选择 New snippet。

    3.6K30

    8则未必知道且超级实用纯CSS布局排版技巧 | 网易4年实践

    本文秉承「能使用CSS实现效果都优先使用CSS」原则,为大家讲解笔者如何巧妙运用各种纯CSS开发技巧完成一些常见或特殊布局排版。因此笔者建议大家认真看一遍以下内容,绝对你有所收货和惊喜。...在常规实现方式里也是在这个中间列里做文章,如何使中间列内容不被左右列遮挡。...间距布局常见于各大列表,是笔者认为最重要布局之一。为何如此简单布局还是花费一些篇幅讲解?...微信朋友圈相册就是最常见多格布局了,单张照片排列、两张照片排列、三张照片排列等等,每种情况下照片尺寸都可能不一致。笔者制作了一个动态多格相册怀念我家狗狗「AB」。...大家感受下纯CSS实现动态数量多格布局吧。 在此留个悬念,不讲解如何实现,看看大家能不能根据笔者列出提示尝试将该效果复原。主要原理是根据结构选择器限制节点范围实现,在本文也可找到原理答案喔!

    3.3K20

    简单说 JavaScript中事件委托(上)

    从上面的图中我们看见,点击 蓝色 p 元素时,先触发了 p 元素上绑定事件,然后又触发了 红色 div 元素上绑定事件,这就是事件冒泡了。 事件委托 实现 先来段代码 上面这段代码中,在元素 li3 还不存在时候就绑定事件了,所以执行代码后就会报错 ?...,因此也是不适合用事件委托。...总结 这篇文章是比较基础,还有一些东西没有说,比如文中说 事件委托实现 时候,举例子比较简单,监听 li 里面没有子元素,如果存在子元素时,那点击子元素 事件就不会触发,那怎么办?...还有 JQuery中事件委托 又是怎么做? 看这里 简单说 JavaScript中事件委托(下)

    58520

    【Java 进阶篇】JavaScript DOM Document对象详解

    DOM核心部分之一就是Document对象,它代表了整个HTML文档。在本篇博客中,我们将深入探讨Document对象,包括它属性、方法以及如何使用它来操纵网页内容。...这些方法您能够根据不同需求选择文档中元素,然后对它们进行各种操作,例如修改样式、添加事件监听器等。 创建新元素 通过Document对象,您可以创建HTML元素,然后将它们添加到文档中。...事件是与HTML元素相关用户行为,例如单击、鼠标悬停、键盘输入等。JavaScript允许您捕获这些事件并执行相应操作。以下是一些常见DOM事件: click: 元素被单击时触发。...让我们看一个示例,演示如何使用Document对象来处理DOM事件: <!...这些功能使JavaScript能够与网页内容互动,实现动态和交互性网页。无论是更改文本内容、更新样式、添加交互事件,还是创建元素,Document对象都是前端开发不可或缺工具之一。

    29520

    结合 Bootstrap + Vue 组件实现 Laravel 异步分页功能

    在日常开发中,对数据库查询结果进行分页也是一个非常常见需求,我们可以基于之前介绍查询方法和前端 HTML 视图实现分页功能,不过从 Laravel 5.3 开始,Laravel 框架就已经为我们提供了非常完整分页解决方案...关于如何使用 Laravel 自带分页功能进行分页,可以参考官方文档中分页章节,说非常清楚,在这篇教程中我们就不再一一演示了,不过 Laravel 自带分页器实现分页链接是动态 URL,不利于...这篇教程我们将着重探讨如何结合 Bootstrap 和 Vue 组件实现异步分页功能,补充官方文档中没有实现细节。...,都遵循了 Bootstrap 默认约定,以便渲染时候生效。...动态设置组件模型属性 我们可以将组件用到动态数据设置为模型属性,这些属性值发生变更后会实时更新引用它视图元素,反之视图元素输入值变更也会同步到模型属性,这称之为双向绑定,通过这个特性可以大大提高编写客户端代码效率

    7.4K20

    Web阶段:第三章:JavaScript语言

    有两种情况: 第一种:表达式全为真的时候。返回最后一个表达式值。 第二种:表达式中,有一个为假时候。...// 有两种情况: // 第一种:表达式全为真的时候。返回最后一个表达式值。...// alert( b && a );//abc // alert( a && b );//true // 第二种:表达式中,有一个为假时候。...格式如下: function 函数名(形参列表){ 函数体 } 如何访问函数: 函数名( 实参列表 ); 如何定义带有返回值函数? 答:只需要在函数体内直接使用return语句返回值即可。...onclick单击事件 常用于按钮被单击之后响应工作 onblur失去焦点事件 常用于输入框失去焦点后,验证其中内容是否合法 onchange内容发生改变事件 常用于输入框或下拉列表内容发生改变后响应

    3.4K20

    【愚公系列】2021年12月 Python教学课程 12-Python函数

    二、为什么要使用函数? 三、 定义函数: 四、 如何调用函数? 1.return 语句: 2.return 可以返回什么? 3. 如何接收函数返回值?...如何接收函数返回值? 我们在调用函数时候,可以将函数返回值保存在变量中。...因为 Python 函数体在被读入内存时候,默认参数 a 指向空列表对象就会被创建,并放在内存里了。因为默认参数 a 本身也是一个变量,保存了指向对象[]地址。...3.动态参数 顾名思义,动态参数就是传入参数个数是动态,可以是 1 个、2 个到任意个,还可以是 0 个。在不需要时候,你完全可以忽略动态函数,不用给它传递任何值。...但是 li 这个列表,我们本意是它内部 1,2,3 分别当做参数传递进去,但实际情况是列表本身被当做一个整体给传递进去了。怎么办?使用一个星号!

    51720

    前端成神之路-WebAPIs03

    eventTarget.attachEvent()方法将指定监听器注册到 eventTarget(目标对象) 上,该对象触发指定事件时,指定回调函数就会被执行。 ?...比如:我们给页面中一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 ? 当时2大浏览器霸主谁也不服谁!...常情况下terget 和 this是一致, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象...事件委托原理 ​ 给父元素注册事件,利用事件冒泡,子元素事件触发,会冒泡到父元素,然后去控制相应子元素。 事件委托作用 我们只操作了一次 DOM ,提高了程序性能。...动态创建子元素,也拥有事件。 知否知否,点我应有弹框在手! 知否知否,点我应有弹框在手!

    2.9K20

    爬取简书用户动态

    0 前言 我在简书关注一位大佬发了一篇文章,文章大意是一个简书用户假意约稿,其实是想别人关注微信公众号,大佬写代码去爬取该用户动态,发现该用户真的是在骗人。...= page.xpath('''//ul[@class="note-list"]/li[last()]''')[0] max_id = int(last_li.get('id').split('-')...= etree.HTML(res.text).xpath('''/html/body/li[last()]''')[0] max_id = int(last_li.get('id').split...,如果想爬取别人动态需要去拿到动态链接,进去他主页,在动态那点击一下鼠标右键,然后复制链接地址或者在新标签页打开链接 ?...3 相关说明 大佬文章链接:https://www.jianshu.com/p/35a85ee14f7b(点击阅读原文查看) 感谢大佬『大神带我来搬砖』写代码,感谢大佬我水一篇文章 ?

    56850

    如何在 React 中点击显示或隐藏另一个组件?

    React 是一种流行 JavaScript 库,用于构建动态用户界面。在一个 React 应用程序中,有时需要一个按钮或链接来触发显示或隐藏一个相关组件。...使用 React 状态管理控制组件可见性React 中状态是指组件私有的数据,它决定了组件在呈现时外观和行为。状态更改时,组件会重新呈现,以反映这些变化。...useState 钩子返回一个数组,其中第一个元素是当前状态值,第二个元素是更新该状态函数。下面是一个示例,展示如何使用 useState 钩子创建一个用于控制组件可见性状态。...当用户单击菜单按钮时,菜单应该出现,然后当用户单击菜单外部时,菜单应该消失。下面是一个示例,展示如何使用 React 和事件处理函数来实现菜单显示和隐藏。...>Item 1 Item 2 Item 3

    4.7K10

    Jenkins配置邮件通知

    Jenkins系列文章 Jenkins介绍与安装 jenkins 如何创建一个job。...Jenkins权限管理 这次分享如何配置邮件通知 ---- 邮件配置分为全局配置和项目配置,先来配置全局配置 在系统管理》系统配置 配置 Extended E-mail...譬如,上次提交代码的人是”first.last”, 默认电子邮件后缀为“@somewhere.com”,那么电子邮件将被发送到“first.last@ somewhere.com”。...Remove通过单击指定触发器当前行”Delete”按钮,你可以删除该触发器。 触发器类型 注意:所有的触发器都只能配置一次。...可以创建要接受的人,可以根据需求进行选择,要接受到邮件,这些人也必须要配置自己邮箱。可以在用户管理时候配置。 项目邮件变量 注意:这里只解释全局配置页面中缺少变量。

    92210

    「Web编程API」- 03

    eventTarget(目标对象)上,该对象触发指定事件时,就会执行事件处理函数。...那么是先执行父元素单击事件,还是先执行div单击事件 ???...常情况下terget 和 this是一致,但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素事件处理函数也会被触发执行),这时候this指向是父元素,因为它是绑定事件元素对象...生活中代理 js事件中代理 事件委托原理 给父元素注册事件,利用事件冒泡,子元素事件触发,会冒泡到父元素,然后去控制相应子元素。...事件委托作用 我们只操作了一次 DOM ,提高了程序性能。 动态创建子元素,也拥有事件。 知否知否,点我应有弹框在手!

    1.4K50
    领券