Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >PrePended按钮似乎未触发

PrePended按钮似乎未触发
EN

Stack Overflow用户
提问于 2020-01-14 22:24:15
回答 1查看 24关注 0票数 1

已添加

代码语言:javascript
运行
AI代码解释
复制
 $('#'+course.code).append('<button class="collapsible">'+course.title+'</button>');

为每个div添加一个带有课程代码ID的按钮。工作正常。当我点击按钮时,它不会触发下面的代码。如果我复制并粘贴这个完全相同的代码,它就能正常工作。生成一个带有prepend的按钮列表是否会影响其功能?

代码语言:javascript
运行
AI代码解释
复制
var coll = document.getElementsByClassName("collapsible");
var i;


    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
          alert('sup');
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }    

以下是最终生成的代码

代码语言:javascript
运行
AI代码解释
复制
<div id="472101A" class="course_card"><button class="collapsible">AP Calculus BC</button>
<div class="row content">
<div class="col-xs-12 col-sm-3">
<p><b>Course Title:</b> <span class="course_title">AP Calculus BC</span></p>
<p><b>Course Code:</b> <span class="course_code">472101A</span></p>
<p><b>Level:</b> <span class="course_level">AP</span></p>
<p><b>Credit(s):</b> <span class="course_credits">1</span></p>
<p><b>Semester(s):</b> <span class="course_semesters">2</span></p>
<p class="course_fee"><b>Course Fee:</b> <span>N/A</span></p>
<p></p></div>
<div class="col-xs-12 col-sm-9">
<div class="course_desc_wrapper">
<p><b>Description:</b></p>
<p class="course_desc">Suggested Skills: Basic understanding of function behavior, such as polynomials, rationals, rational exponent, trigonometric functions and other transcendental functions. Should be able to solve, graph, evaluate and analyze those functions. Should be able to apply those functions to model real world phenomena.  Class covers BOTH Calculus 1 and 2. Accelerated Pace. Students should be able to process and apply information at a very fast pace.</p></div>
<div class="course_requirements_wrapper">
<p><b>Prerequisite Classes &amp; Grades:</b></p>
<p class="course_prerequisites">Honors PreCalculus: Students must earn an A,B both semesters and pass a proficiency exam in May
OR
Regular PreCalculus: Students must earn an A both semesters and pass a proficiency exam in May
OR
ATP: Students must earn an A,B both semesters and pass a proficiency exam in May
</p></div>
<div class="course_typicalGradeLevel_wrapper">
<p><b>Typical Grade Level:</b></p>
<p class="course_typicalGradeLevel">11-12</p></div>
<div class="course_levelOfChallenge_wrapper">
<p><b>Level of Challenge (1-5) 5 is extremely challenging:</b></p>
<p class="course_levelOfChallenge">5</p></div>
<div class="course_homeworkCommitment_wrapper">
<p><b>Typical Homework Commitment:</b></p>
<p class="course_homeworkCommitment">4-6</p></div>
<div class="course_careerAspirations_wrapper">
<p><b>Interests / Career Aspirations:</b></p>
<p class="course_careerAspirations">Engineering, Computer Science, Business</p></div>
<div class="course_requirements_wrapper">
<p><b>Other:</b></p>
<p class="course_notes">Suggested Skills: Basic understanding of function behavior, such as polynomials, rationals, rational exponent, trigonometric functions and other transcendental functions. Should be able to solve, graph, evaluate and analyze those functions. Should be able to apply those functions to model real world phenomena.  Class covers BOTH Calculus 1 and 2. Accelerated Pace. Students should be able to process and apply information at a very fast pace.</p></div>
<div class="ap_wrapper">
<p><i>*All AP Courses are expected to have a $100 fee ($25 class fee and $75 exam fee).</i></p>
<p><i>The exact exam fee for testing in May 2016 will be released by the CollegeBoard in October 2015. This exam fee determines the total price that students will owe for each AP Course/exam. The AP exam fee may be fully or partially reduced for students with free/reduced lunch, per funding by district and state grants. The exact fee will be provided as soon as the district and state release their funding statement.</i></p>
<p></p></div>
<p></p></div>
<p></p></div>
<hr></div>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-14 22:37:43

这听起来像是在创建元素之前设置事件侦听器。确保在jQuery append语句之后运行for循环。

为了确保在设置侦听器时元素已经存在,可以运行console.log(coll[i])来确定元素在执行时是否还存在。

另一种选择是使用jQuery的on函数。所以在你的例子中,你可以使用类似这样的东西:

代码语言:javascript
运行
AI代码解释
复制
$('body').on('click', '.collapsible', function() {
    // do something
})

这为您提供了它将触发的好处,即使您在运行此函数后将元素附加到页面也是如此。这也适用于任何.collapsible元素,而不必单独应用于每个元素。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59742629

复制
相关文章
按钮与交互-使用按钮触发操作
在本节中,我们将介绍一个重要且简单的元素,即按钮。这个小元素可以改变整个UX。我们将使用该按钮来缩放我们的3D模型。此外,我们将尝试更改手机的壁纸。对于您的型号,如果您有不同的材质或颜色,您也可以更改它。
iOSDevLog
2019/06/17
4.9K0
按钮与交互-使用按钮触发操作
js后退按钮事件触发
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/164172.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/15
11.3K0
按钮长按循环触发小例子
  设置下列QPushButton的函数后,将启用并到达一定时间后自动重复触发。期间将发出pressed(),released()和clicked()信号。
Qt君
2020/06/01
8670
小程序button按钮误触发问题
最近做小程序碰到一个神奇的现象,页面上定义了一个按钮触发分享, 另外一个同级view标签处理别的事件。 但是点击view标签的时候却触发了分享操作。
薛定喵君
2019/11/05
1.1K0
wxpython 编程触发菜单或按钮事件
最近逐步熟悉wxpython,编写了几个小小功能的GUI程序,GUI中免不了会有在代码中触发控件事件的业务需求。在其他Gui界面的语言中有postevent、triggerevent 调用事件名称的函数,非常方便。
黯然销魂掌
2018/09/27
2.5K0
MUI TableViewCell 上按钮点击Cell同时触发解决
   我们点击按钮的时候,Cell事件也被触发,在iOS中可以用hittest通过判断控件位置和显示顺序执行点击。起初想按照这个思路来改。看MUI 提供了解决法防止事件冒泡。
星宇大前端
2019/01/15
1.4K0
html复选框选中与未选中触发事件的方法
今天,当制作一个不需要from表单的复选框来提交数据的小函数时,需要在复选框被选中或未选中的情况下修改一些后台数据。我想到了用js代码来监控复选框的状态,并将实时数据发送到后台。关于js代码如何监控checkbox的状态,可以参考下面的例子。
Power
2023/05/25
5.3K0
html复选框选中与未选中触发事件的方法
计算机与打印机未连接,win7系统无法打印提示似乎未连接打印机的恢复步骤
win7系统使用久了,好多网友反馈说win7系统无法打印提示似乎未连接打印机的问题,非常不方便。有什么办法可以永久解决win7系统无法打印提示似乎未连接打印机的问题,面对win7系统无法打印提示似乎未连接打印机到底该如何解决?其实只需要首先我们需要检查一下打印机的驱动是否正常,右键点击桌面上的“此电脑”图标,在弹出菜单中选择“属性”菜单项,这时会打开windows10系统的系统窗口,点击左侧边栏的“设备管理器”菜单项就可以了。就可以解决win7系统无法打印提示似乎未连接打印机的问题,针对此问题小编给大家收集整理具体的图文步骤:
全栈程序员站长
2022/07/01
3.4K0
计算机与打印机未连接,win7系统无法打印提示似乎未连接打印机的恢复步骤
vue中在父组件点击按钮触发子组件的事件
1、父组件的button元素绑定click事件,该事件指向notify方法 2、给子组件注册一个ref=“child” 3、父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg 4、子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中
江一铭
2022/06/16
6.8K0
问题:未清空磁盘被添加到磁盘组触发坏块
导读:当我们生产系统中遇到ASM磁盘组容量快被耗尽时,添加磁盘扩容是处理该问题较为常用的手段之一,几乎每个专业的DBA都操作过。但是设想一下,如果添加到ASM磁盘组的磁盘没有提前被清空,会出现什么样的情况呢?本文分享一起客户近期碰到的未清空磁盘被添加到磁盘组触发坏块(Read datafile mirror)的案例,在此提醒大家注意。
数据和云
2020/03/27
1K0
使用mui搜索框触发手机软键盘搜索按钮事件
要虚拟键盘显示“搜索”二字,需满足以下两个条件: (1)设置input属性 type=‘search’ (2)input需在form表单中 <!--html--> <form action=""> <div class="mui-input-row mui-search"> <input id="search" type="search" class="mui-input-clear" placeholder="输入关键字搜索"> </div> </f
素描
2019/09/19
1.9K0
低代码平台amis学习 四:一个表单添加多个按钮,不同按钮触发不同请求
当给表单上不同按钮都配置网络请求时,也需要用到api参数,不过需要把它配置到对应的按钮上,如下
冰霜
2023/02/24
2.1K0
低代码平台amis学习 四:一个表单添加多个按钮,不同按钮触发不同请求
安卓Android按钮Button点击和复选框CheckBox选中的监控触发事件
CheckBox复选框和按钮Button的定义,main.xml内容如下: <CheckBox android:id="@+id/checkbox1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="复选框1" /> <Button android:id="@+id/button1" android:layou
骤雨重山
2022/01/17
4.5K0
Turbopack似乎并没有那么牛
这几天前端圈子有一个比较火的基建工具Turbopack,官方文档号称比vite快10倍,比webpack快700倍。今天正好有空,把官方提供的demo浅玩了一下,发现它并没有那么神。
神奇的程序员
2023/01/09
7730
Turbopack似乎并没有那么牛
Jenkins触发构建--时间触发
时间触发是指定义一个时间,时间到了就触发pipeline执行。在pipeline中,使用trigger指令来定义时间触发,只能定义在pipeline块下。支持cron pollSCM upstream三种方式。其它方式可以通过插件来实现。
陈不成i
2021/06/02
2.5K0
Jenkins触发构建--事件触发
事件触发就是发生了某个事件就触发pipeline执行,这个事件可以是你能想到的任何事件,比如手动在界面上触发、其它job主动触发、HTTP API Webhook触发等。
陈不成i
2021/06/02
6.2K0
【HTML】HTML 表单 ② ( 按钮表单 | 普通按钮 | 提交按钮 | 重置按钮 | 图片按钮 | 文件域 )
将 <input /> 标签 的 type 属性设置为 button , 就可以将该 表单组件 设置为 普通按钮 类型表单 ;
韩曙亮
2023/03/30
8.7K0
【HTML】HTML 表单 ② ( 按钮表单 | 普通按钮 | 提交按钮 | 重置按钮 | 图片按钮 | 文件域 )
案例解读:Oracle目录由于TFA触发bug导致jdb文件未自动清理引起空间不足
这个案例是客户的一个12c的集群环境,由于TFA的jdb文件无限积累造成大量空间被占用,导致数据库目录使用率比较高。
数据和云
2021/03/26
1.3K0
社区团购,尽头似乎还很远
受疫情影响社区团购再度站上了风口,众多互联网巨头纷纷入局社区团购领域,试图从中分走一块蛋糕。据企查查大数据研究院发布的《2020年社区团购投融资数据报告》显示,2020年社区团购行业公开披露的融资事件达19起,融资总金额为171.7亿元,同比增长了356.3%。
刘旷
2021/10/08
1.4K0
点击加载更多

相似问题

BackgroundWorker RunWorkerAsync似乎未触发

10

LinkButton命令事件似乎未触发

10

PayPal似乎未触发PyroCMS PayPal IPN

10

MS CRM 2015,插件似乎未触发

11

按钮操作未触发

20
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档