CODEWITHSUNDEEP
javascriptjquery
user1899500
user1899500

Reputation: 35

Dynamically generated html elements stop working

In the following code I have some comments in an array which are displayed in a div using jQuery. Each comment has an options button which works fine until I post a new comment. I tried using unique IDs for each element but it didn't work either.

When the page loads, the options buttons work; but when I submit a new comment, none of the buttons work. What am I doing wrong?

Here's my script:

var i = 0;
var comments_display= "";
var comments = ['Hello World!', 'Hello! This is a comment.'];

//reads the entire array, creates the content, and sends it to the div
function show_comments(){
   for (i=0; i<comments.length; i++){
     comments_display += "<div class='single_comment_container'>";
     comments_display += "<div class='comment_comment'>" + comments[i] + "</div>";
     comments_display += "<div class='options'>Options</div></div>";
    }
    $("#comment_container").html(comments_display);
    comments_display = "";
 }

//appends a new comment to the array
function new_comment(){
   if ($("#comment_input").val() == null || $("#comment_input").val() == ""){
      alert("Your comment must be at least 1 character long.");
   }

   else{
      comments.push($('#comment_input').val());
       show_comments();
       $("#comment_input").val("");
   }
}

$(document).ready(function(){
   show_comments();

   $("#submit_comment").click(function(){
      new_comment();
   });

//display a message when an element of the class 'options' is clicked
$(".options").click(function(){
   alert("OPTIONS");
});

});

And here's a fiddle to see how it works. http://jsfiddle.net/fahKb/3/

Thank you for taking your time to read this question.

Upvotes: 0

Views: 71

Answers (3)

Tom Bird
Tom Bird

Reputation: 1039

$(document).on( 'click', '.options', function() {
   alert("OPTIONS");
});

This first response is right, the cause of this is that when elements are loaded into the DOM you assign event listeners. Essentially saying hey if this is 'clicked' then do something. The problem is that when adding a new element you have NOT also added the event listeners. By doing something like the above code, essentially what you're doing is a search for everything within document that then has the class of ".options" and finally if it is clicked then acting and executing some code.

With that said using document isn't the most optimum method but it is sometimes necessary. A better solution would be if you were to wrap all the comments in say a "div" or some other element then pass that in place of document. This will instead of searching the entire document for the '.options', it would only search your wrapper eliminating alot of unnecessary work.

$('.commentWrapper').on( 'click', '.options', function() {
   alert("OPTIONS");
});

Upvotes: 0

Jai
Jai

Reputation: 74738

Just because you are adding elements dynamically so click won't work on those, so you have to find the closest existing parent on the page, here in your case is this comment_container and use the .on() handler: http://jsfiddle.net/fahKb/4/

$('#comment_container').on('click',".options",function(){
  alert("OPTIONS");
});

Upvotes: 2

Kevin Boucher
Kevin Boucher

Reputation: 16675

You need to use delegation:

$(document).on( 'click', '.options', function() {
   alert("OPTIONS");
});

http://api.jquery.com/on/

Note: You might want to use a static element other than document. (Some parent div that's always on the page or something.)

Upvotes: 3

Related Questions