Dynamically adding 'divs' using jQuery [duplicate]

Question

This is the script that I've written. The first click function works fine but the other two don't work as expected. The tags follow the href link and the function for its click doesn't work. Is it because they have been created by jQuery and are not in the original html page?

$("#edit-description").click(function(){
    $("#add-description").replaceWith( "<div id='add-description'><textarea cols='43' rows='9' placeholder='Add a description...'></textarea><a href='#' class='u-update'>Update</a><a href='#' id='add-description-cancel'>Cancel</a></div>" );
    return false;
  }); 

  $("#add-description-cancel").click(function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
  }); 

  $(".u-update").click(function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
  }); 

Answer 1

If element has been created dynamically use delegate function of jquery

change your 2nd and third code to.

$("body").delegate("#add-description-cancel", "click", function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
  }); 

$("body").delegate(".u-update", "click", function(){
    $("#add-description").replaceWith( '<div id="add-description">Write a <a href="/#" id="edit-description">description</a> about the college.</div>');
    return false;
}); 

Note that you can change the selector $("body") to something inner like the element's parent that is created during page rendering, so that jquery will limit it's scope in finding it.

Hope it helps.

Answer 2

Use on instead of delegate as on is the preferred method.

As per documentation

As of jQuery 1.7, .delegate() has been superseded by the .on() method

http://api.jquery.com/delegate/

Rule of thumb, whenever you are adding content dynamically use event delegation rather than direct event assignment