jQuery not working on dynamically loaded content

Question

Newbie here looking for advice. I've looked through a ton of items similar to this and nothing is solving my problem. Some of my jQuery is working, some is not. I assumed it was due to the order I was loading my files but nothing seems to help. Any help is greatly appreciated!

Here is the order that I've loaded my scripts (via Script Editor web part due to permission limitations)

<script src="mySite/SiteAssets/CUSTOM/JS/jquery-3.2.1.min.js"></script>
<script src="mySite/SiteAssets/CUSTOM/JS/dashProjects.js"></script>
<script src="mySite/SiteAssets/CUSTOM/JS/leftNav.js"></script>
<script src="mySite/SiteAssets/CUSTOM/JS/dashUserMain.js"></script>

Here is my jQuery:

$(document).ready(function(){

    //THIS WORKS
    $(".logoImg").on("click",function(){
        alert("HI");
    });

    //THIS DOES NOT WORK
    $(".expand").on("click",function(){
        alert("HI");
    });
});

.logoImg is referenced in my /leftNav.js file which is using CSR to render a list. The dashProjects.js file is the one where I am creating .expand. I am using REST to build some HTML and then append it to a div within another Script Editor. My jQuery file is /dashUserMain.js. Since this is loaded last, shouldn't is be availble for all elements appended to the page in the /dashProjects.js file? It isn't working for any elements created by my /dashProjects.js file! I'm sure this is something simple and stupid but I can't figure it out for the life of me! Thanks!

Answer 1

With jQuery, what happens is it bind event listeners on each DOM element inline and not on classes or ids. So when the binding method is called, events are bonded on the DOM loaded.

To bind event on dynamically loaded DOM, we bind the event to the nearest static parent and give the element we want to bind event.

Please note that "parent" and "yourElement" can be a class, ID or any DOM depending on your requirement.

$("parent").on("click", 'yourElement', function() { alert("You have just clicked on "); });

What happens in the above code is that the click event is bounded on "parent" and when you click on "parent" it searches if the click was on "yourElement". If "yourElement" is the clicked target, alert message is shown.

This is the basic way how works.

$("someParentElement").on("event","yourElement",function(){
   something
})

It is always advisable not to bind with "document" as parent as it will increase your search area.

I hope this helps.

Answer 2

    $(function() {
    $(document).on("click", '#mydiv', function() {
        alert("You have just clicked on ");
    });
});

refer above mention code for jquery click event.

Answer 3

You probably need to use event delegation, something like:

$("#YourParent").on("click", ".expand", function(){
    alert("HI");
});

See https://learn.jquery.com/events/event-delegation/