Blog

Simple Ways to Alter Dynamically Rendered HTML using jQuery
Posted on June 9, 2015 in jQuery by Matt Jennings

Using the $(document).on(); Event Handler to Alter Dynamically Generated Content

$(function() {

    /*
    Example below will alert a string on 
    elements with .alert classes when clicked including:
    - Statically rendered (shadow DOM) HTML elements and
    - Dynamically rendered (virtual DOM) HTML elements
    */

    $(document).on("click", ".alert", function() {
        alert("you clicked me!");
    });

});

Using a Callback to Alter Dynamically Generated Content

function paraAction() {
    $("p").click(function(){
        alert("Paragraph tag clicked!");
    });
}

$(function(){
    $("button").click(function(){
        $("#dynamic-content").append("<p>This is a paragraph with little content.</p>");

        /*
         A callback is a function call inside of another function.
         Example callback below that alerts a message
         when I click on a dynamically generated paragraph
         that was created AFTER I clicked a button:
         */
        paraAction();
    });
});