2620
a jquery function appended html content to a div element. but that html elements cannot access a jqu
Question:
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 files.
index.php
request.php
test.php
This is the Index.php file. In this file header I have two simple jquery functions. one function is loading separate php file in to the #editor-form-container div tag. other function is just giving an alert when it called.
In the body of this page I have a div tag having the text "click me for button" and this div is calling the posting_url() function once it clicked and that function is loading external php file as describe before.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
function posting_url() {
var url = 'request.php';
var pdata = "";
$.ajax({
url: url,
data: pdata,
success: function(data) {
$('#editor-form-container').html(data);
}
});
}
$(document).ready(function() {
$('.click_me_for_alert').on('click', function() {
alert("You clicked a button.");
});
});
</script>
</head>
<body>
<?php
// put your code here
?>
<div onclick="posting_url()">
Click me for button
</div>
<div id="editor-form-container">
<button class="click_me_for_alert">
Iam a default button
</button>
</div>
</body>
</html>
this is the request.php file. it is just requiring the test.php file
<?php.
require_once 'teset.php';
?>.
then in the test.php file. I have a simple button. like this.
<button class="click_me_for_alert">
Iam a appended button
</button>
Before I click the div that having the text "Click me for button" if I click the Iam a default button. then it gives me the alert.
But the problem is after I click the div tag "Click me for button" and after the Iam a appended button appears if I click that button it is not giving me that alert. no console errors.
why this is happening?
Answer1: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.");
});
});
Answer2:<a href="https://developer.mozilla.org/en/docs/Web/API/MutationObserver" rel="nofollow"><strong>Mutation-Observers</strong></a> 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. <a href="http://caniuse.com/#feat=mutationobserver" rel="nofollow">List of browsers that support mutation observers</a>
Although this will work fine but still <strong>SUGGESTION BY @REGENT IS MUCH PREFERABLE WAY TO DO IT</strong>.
