A Jquery Function Appended Html Content To A Div Element. But That Html Elements Cannot Access A Jquery Function In The Head Section

Previously I put my question in stackoverflow with all details. but I couldn't get any help. so now I am making my scenario simple and put my question again here. I have three php

Solution 1:

For dynamically created elements use delegated event handler:

$(document).ready(function()
{
    $("#editor-form-container").on('click', '.click_me_for_alert', function()
    {
        alert("You clicked a button.");
    });
});

Solution 2:

Mutation-Observers is the one way to handle the issue in hand, Add the following code after document.ready function of your code:

<script>
var target = $( "#editor-form-container" );
// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
   mutations.forEach(function( mutation ) {
   var newNodes = mutation.addedNodes; // DOM NodeList
if( newNodes !== null ) { // If there are new nodes added

    $('.click_me_for_alert').on('click', function() {
                alert("You clicked a button.");
            });  }
   });    
});

// Configuration of the observer:
var config = { 
attributes: true, 
childList: true, 
characterData: true 
};

// Pass in the target node, as well as the observer options
observer.observe(target, config);
</script>

Put this code just before closing body tag. List of browsers that support mutation observers

Although this will work fine but still SUGGESTION BY @REGENT IS MUCH PREFERABLE WAY TO DO IT.