Dynamically adding 'divs' using jQuery

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

and [Event binding on dynamically created elements?](http://stackoverflow.com/q/203198/218196) — Felix Kling, Dec 17 '13 at 06:21

score 5 · Accepted Answer · answered Dec 17 '13 at 06:07

5

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.

answered Dec 17 '13 at 06:07

Bk Santiago

1,523
3
13
24

You can approve the answer, if it fits you. :) – Bk Santiago Dec 17 '13 at 06:10
Antiago But, now there is another problem. The "#add-description-cancel" creates back the first div again dynamically. And now it has the same problem. So, should i add the 'delegate' function to that too? – toothie Dec 17 '13 at 06:12
To approve I need to wait few more minutes :D – toothie Dec 17 '13 at 06:12
Yes, to be safer, make all elements that might be created dynamically to `delegate` functions. or @raunak said. You can instead use `on` instead of `delegate` . – Bk Santiago Dec 17 '13 at 06:14
1

better use [$.on()](http://api.jquery.com/on/) if you are using jQuery 1.7+ – lastr2d2 Dec 17 '13 at 06:15
I tried using $.on() but it isn't working. I'm using jQuery 1.10.2 – toothie Dec 17 '13 at 06:24

Raunak Kathuria · Answer 2 · 2013-12-17T06:44:26.680

3

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

edited Dec 17 '13 at 06:44

answered Dec 17 '13 at 06:12

Raunak Kathuria

3,185
1
18
27

1

*"use event delegation rather than event handler"* Event delegation is binding an event handler to an ancestor of the element, instead of binding the handler directly to the element. In both cases you are working with event handlers. – Felix Kling Dec 17 '13 at 06:22
@FelixKling i meant to say direct event assignment, so should it be "rather than direct event assignment"? or how would you put it? Thanks for the info – Raunak Kathuria Dec 17 '13 at 06:27
Yep, that would be better! – Felix Kling Dec 17 '13 at 06:40

score 0 · Answer 3 · answered Dec 17 '13 at 06:13

*If you are using jquery 1.7.2 *

  $("body").delegate("#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;
  }); 

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

*If you are using jquery 1.10.2 *

    $(document).on("#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;
  }); 

   $(document).on("#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;
  }); 

   $(document).on(".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;
  });

Dynamically adding 'divs' using jQuery

3 Answers3