LaVOZs

The World’s Largest Online Community for Developers

'; javascript - PrePended Button Does Not Appear to be firing - LavOzs.Com

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>

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.

Related
Getting the ID of the element that fired an event
How does JavaScript .prototype work?
How can I know which radio button is selected via jQuery?
What does “javascript:void(0)” mean?
What does “use strict” do in JavaScript, and what is the reasoning behind it?
Why does Google prepend while(1); to their JSON responses?
How does the “this” keyword work?
Why does ++[[]][+[]]+[+[]] return the string “10”?
How does data binding work in AngularJS?
Why does my JavaScript code get a “No 'Access-Control-Allow-Origin' header is present on the requested resource” error when Postman does not?