Do I have to handle click events differently for classes that are not present when the page loads?

Question

I have a click event in my jquery that looks like this...

$(document).ready(function(){
    //some other stuff

    $('.tag_result').click(function(){
        console.log("clicked");
    });
});

I cannot for the life of me get this to work. I have some code also in the document.ready function that is generating some div's with the class tag_result. Upon inspection of the html after these div's are inserted, I have confirmed that they are placed and formatted correctly, including their class="tag_result" identifiers.

To try to solve the issue, I simplified my problem to a jsfiddle program, and to my surprise, it worked as intended! The only difference that I could detect was that the html elements that I'm referencing in the .click() function are always there in the jsfiddle application and not always there in my real application.

Is that what is causing my issue? Or is there something else that must be wrong with my code?

Answer 1

You need to use delegation if the elements are dynamically inserted

$(document).ready(function(){
    //some other stuff

    $(document).on('click', '.tag_result', function(){
        console.log("clicked");
    });
});