Populating second level dynamic HTML content based on first level dynamic HTML content using jQuery

Question

I have three different divs, div 1, div 2 and div 3.

Step 1: I will display few pre-defined number of buttons in div 1 which when clicked, will populate dynamic content into div 2.

Step 2: This dynamic HTML content contains few random number of buttons which when clicked should show their respective content in div 3.

I am using String Template 4 to populate these html files. So I have means to get the necessary information into page and also identify each button by a unique identifier. Since Step 1 deals with pre-determined number of buttons, I have individual actions defined for each button and I am able to show their respective dynamic content. However to identify Level 2 button click actions, I am grouping them together with a common class name eg: "dynamicbuttons".

However I am unable to register the action to display any kind of content in div 3.

Here's my jQuery sample code:

$(document).ready(function() {
    $('#button1A').on("click", function(event) {
        $('#div2').html("<p> This is normal div 2</p><br><input type='button' id='button2' class='dynamicbuttons' value='Button 2'>");
        $('#div2').show();
    });
    $('#button1B').on("click", function(event) {
        $('#div2').html("<p> This is heavily populated div 2</p><br><input type='button' id='button2A' class='dynamicbuttons' value='Button 2A'><br><br><br><input type='button' id='button2B' class='dynamicbuttons' value='Button 2B'>");
        $('#div2').show();
    });
    $('.dynamicbuttons').on("click", function(event) {
        $('#div3').html("<p> This is div 3</p>");
        $('#div3').show();
    });
});

I have created a jsfiddle with my scenario here : https://jsfiddle.net/2waL6m51/

Can someone provide me any pointers on how to solve this problem?

$(document).on("click", ".dynamicbuttons", function(event) { instead of $('.dynamicbuttons').on("click", function(event) { — Bdloul, Jul 13 '17 at 01:26
Looks like my searching skills on stackoverflow are not as good as my searching skills on google. Thanks for all the suggestions and pointers guys. — Sree Sake, Jul 13 '17 at 01:31
@Bdloul I have made the changes as per your suggestions. However, the button clicks are being detected but the div is still not displaying any content. Check this jsfiddle : [link]https://jsfiddle.net/c4r3gpcq/ — Sree Sake, Jul 13 '17 at 12:09

score 0 · Answer 1 · answered Jul 13 '17 at 01:23

You need to use delegation. You've dynamically created elements and you can't just create listeners for those buttons. You have to listen by using the parent div.

Check out this Fiddle I built for an explanation:

<p>This is to demonstrate how to use delegation to make dynamically created buttons (or any dynamically created element) respond to an event handler.</p>

Note that in order to do this, there must be some element that loads with the DOM so that the listener can find the child element inside of it.

In this case, we're using the div with the id of "inside_div" as our pre-loaded element and then adding the button dynamically to that div when button 1 is clicked.

Button 1

Now the jQuery:

    //Standard event listener for button1
$('#button1').click(function () {    
    var btn_txt = "<br><button id='button2'>Button 2</button>";
    $('#inside_div').append(btn_txt);

});

//Note that a standard event listener will not work on Button 2 because
//it was created dynamically and so the event listener cannot find it.
//$('#button2').click(function(){
//  alert('button2 event');
//});


//Delegated event listener
//Note that we're referencing the element that loaded with the DOM ('#inside_div')
//Also note that insted of using a click event, we use .on() and then specificy 'click' inside of it.
//Because #inside_div already exists, we can then locate the 
//dynamically created child element inside of it.

$('#inside_div').on('click', '#button2', function () {    
    var i = 3;
    while (i <= 5) {
        var btn_txt = "<br><br><button class='test_class' id='button" + i + "' >Button " + i + "</button>";
        $('#inside_div').append(btn_txt);
        i++;
    }
});

//This is to demonstrate a listener that works on multiple elements with the same class.
$('#inside_div').on('click', '.test_class', function () {
    alert('Class Alert');
});

Populating second level dynamic HTML content based on first level dynamic HTML content using jQuery

1 Answers1