Javascript 预先设置的按钮似乎未启动

增加

 $('#'+course.code).append('<button class="collapsible">'+course.title+'</button>');

$（'#'+课程.代码）.append（''+课程.标题+''）；

为每个div添加一个按钮，其中包含课程代码ID。这工作很好。当我点击按钮时，它不会触发下面的代码。如果我复制并粘贴这个精确的代码，它可以正常工作。生成带有前置的按钮列表是否会影响其功能

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";
        }
      });
    }    

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

下面是最终生成的代码

<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>

AP演算
课程名称：AP微积分BC

课程代码：472101A

级别：AP

学分：1

学期：2

课程费用：不适用

说明：

建议技能：对函数行为的基本理解，如多项式、有理数、有理指数、三角函数和其他超越函数。应该能够解决，图表，评估和分析这些功能。应该能够应用这些函数来模拟真实世界的现象。课程包括微积分1和微积分2。加快步伐。学生应该能够以非常快的速度处理和应用信息

先修课程及；等级：

荣誉预科：学生必须在两个学期都获得A、B，并在五月份通过能力考试
或
常规预科：学生必须在两个学期都获得A，并在五月份通过能力考试
或
ATP：学生必须在两个学期都获得A、B，并在五月份通过能力考试

典型职等：

11-12
挑战级别（1-5）5极具挑战性：

5
典型的家庭作业承诺：

4-6
兴趣/职业抱负：

工程、计算机科学、商业

其他：

建议技能：对函数行为的基本理解，如多项式、有理数、有理指数、三角函数和其他超越函数。应该能够解决，图表，评估和分析这些功能。应该能够应用这些函数来模拟真实世界的现象。课程包括微积分1和微积分2。加快步伐。学生应该能够以非常快的速度处理和应用信息

*所有AP课程都需要100美元的费用（25美元的课程费和75美元的考试费）

2016年5月考试的确切考试费用将于2015年10月由学院董事会公布。该考试费用决定了学生在每门AP课程/考试中应支付的总价。对于有免费/减少午餐的学生，AP考试费用可根据地区和州拨款全额或部分降低。当地区和州政府发布其资金报表时，将立即提供确切的费用

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

for

循环

在设置侦听器时，为了确保元素存在，您可以运行

console.log（coll[i]）

来确定元素在执行时是否存在

另一个选项是使用jQuery的

on

函数。因此，在您的情况下，您可以使用以下内容：

$('body').on('click', '.collapsible', function() {
    // do something
})

---

这样做的好处是，即使在运行此函数后将元素附加到页面中，也会触发此函数。这也适用于任何

。可折叠的
元素，不必单独应用于每个元素。
是否设置侦听器，然后追加元素？否侦听器位于底部，因为可以放置
console.log（coll[i]）的
循环的第一行
只是为了确保元素实际上存在，它不会记录它们的名称。。。我得把密码转过来。它在生成元素之前收集元素。我想这个答案的关键部分是如何委派事件。如果单击的元素与
.collapsable
选择器匹配（即使
.collapsable
是以编程方式创建的），则该事件将绑定到
主体（始终存在）并触发。相关（o）