JQuery: dynamically update HTML so that it is recognized by JQuery

Question

So, first of all, I am a newbie in Web (html/js)

What I want to achieve:

I have a custom tree and I want to be able to dynamically (using jquery) create children for that tree:

Html:

    <ul>
      <li>
        Item
        <input type="button" value="+" class="childAdder">
        <ul class="childrenList"></ul>
      </li>
    </ul>

JS:

$(".childAdder").click(function() { // add child which is the same as root
  $(this).parent().children(".childrenList").append(
    '<li>Item</li>\
     <input type="button" value="+" class="childAdder">\
     <ul class="childrenList"></ul>'
  );
});

And as you can see, I know how to add a child (more or less, an advice is always welcomed). The problem is, however, that this code only works for items that are "predefined" in html --> everytime I dynamically(via JS) add a child, this code just does not execute for this newly created element (tried to do alert('Hello'); - nothing is seen)

Question: I assume I need to somehow "properly" add my new child to the DOM(?) of HTML or whatever, so that it is then recognized by JS, right? (but that seems to be only achieved trough HTML static page, no?)

Anyway, how do I make this thing work: add new child so that the same JS code that is executed for HTML element is executed for the element created by JS

is there a solution or the whole implementation is just wrong?

Scott Marcus · Accepted Answer · 2017-04-30 21:41:05Z

3

You need to use event delegation for this to work. This is done by using the on JQuery method for event wiring and modifying the parameters.

Also (FYI), a <ul> element can only contain <li> elements as children. Your bullet/nested list structure is invalid.

Lastly, in the HTML string you were appending included random \ characters, which are not needed and are actually invalid at those locations.

Here's the correct implementation with the HTML corrected to be valid.

// JQuery event delegation requires the use of the "on" method and then you 
// bind the event to an object that is sure to always recieve the event (document 
// works well here because of event bubbling). Then you specify the target element
// that the actual event will be triggered from.
$(document).on("click", ".childAdder" ,function() { 
  // add child which is the same as root
  $(this).parent().children(".childrenList").append("<li>Item<br><input type='button' value='+' class='childAdder'><ul class='childrenList'></ul></li>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
      <!-- <ul> and <ol> elements can only have <li> elements as thier children (aside from
           comments like this one). To properly nest lists, organize the HTML as follows: -->
      <li>Item<br>
        <input type="button" value="+" class="childAdder">
        <ul class="childrenList"></ul>
      </li>
 </ul>

edited Apr 30, 2017 at 21:41

answered Apr 30, 2017 at 21:07

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

andrgolubev Over a year ago

if you meant `\` symbol, it was needed to enable putting the string on separate lines. looking into your solution now, thank you

Scott Marcus Over a year ago

No, that's not the character I'm talking about. I'm talking about the two backslash characters (and you should know that the back-tick character is part of ES6 and does not work in all browsers yet.

andrgolubev Over a year ago

Edited the comment (forgot about double \)

Scott Marcus Over a year ago

The backslash does not assist in putting strings on separate lines. The backslash character is how JavaScript escape characters are embedded into strings and in those cases, they are followed by another character. For example "\"To be or not to be...\"" causes double quotes to surround the actual string because \" is the escape code for ".

andrgolubev Over a year ago

I agree. By the way, you code works flawlesly, thank you!

Collectives™ on Stack Overflow

JQuery: dynamically update HTML so that it is recognized by JQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related