PrePended Button Does Not Appear to be firing

Question

Added

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

To add a button to each div with an ID of course code. The works fine. When I click the button it won't fire the code below. If I copy and paste this exact code it works fine. Does generating a button list of buttons with prepend effect its functionality?

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

Here is the final generated code

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

Are you setting the listener and then appending the element? — Rob Kwasowski, Jan 14 '20 at 22:25
As the first line of the `for` loop can you put `console.log(coll[i])` just to make sure the elements actually exist — Rob Kwasowski, Jan 14 '20 at 22:28
nice... i had to move the code around. it was collecting the elements before they were generated. — John, Jan 14 '20 at 22:33
I just added another part to the answer that you could try to make things simpler. — Rob Kwasowski, Jan 14 '20 at 23:01

Rob Kwasowski · Accepted Answer · 2020-01-14T23:00:25.247

2

It sounds like you are setting the event listener before the element is created. Make sure you run your for loop after the jQuery append statement.

Just to make sure the elements exist when you are setting the listener you could run console.log(coll[i]) to tell you for certain if the element exists yet at that point in execution.

Another option is to use jQuery's on function. So in your case you could use something like this:

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

This gives you the benefit that it will trigger even if you append elements to the page after running this function. This will also work for any .collapsible element, and doesn't have to be applied to each one individually.

edited Jan 14 '20 at 23:00

answered Jan 14 '20 at 22:37

Rob Kwasowski

2,690
3
13
32

1

I guess the essential part of this answer is how the event is delegated. The event is bound to the `body` (which is always present) and triggered if the clicked element matches the `.collapsible` selector (even if the `.collapsible` is created programatically). Related: https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on :o) – agrm Jan 14 '20 at 23:07

PrePended Button Does Not Appear to be firing

1 Answers1