First, Could you explain me how the browser store the content of div called in ajax.
I don’t understand why the content called in ajax and displayed in the browser inspector can’t be directly targeted with jquery.
Then, How can I easily target a class (close-window-post) inside the div called in ajax to close this one.
In the similar questions of mine , the answer tell about another ajax call to target specific class inside the div called in ajax.
The only thinks that works is to target the div arounded (window-post) the div called in ajax :
<div id='window-post' class='win-post dis-none pos-abs p-1v w-100vw h-100vh zIndex899'>
//Call in ajax <div class="w-100 h-100 d-flex-center"><i class="im-x-mark"></i></div>
</div>
My script
jQuery('#window-post').find('.im-x-mark').on('click',function(){
jQuery('#window-post').addClass('dis-none');
// Or jQuery('#window-post').hide();
});
My script are called in this order:
Admin-ajax.php
callajax.php
myJquery.js file
I have well add “jQuery(document).ready(function(){” in myJquery.js.
(edit) Here is my ajax call with your :
jQuery(document).ready(function(){
function CloseAjaxPost(){
jQuery('#window-post .post-title').find('.im-x-mark').on('click',function(){
alert('Whaouuuuuh !!!');
jQuery('#window-post').addClass('dis-none');
});
}
jQuery('.post-link').click(function() {
var post_id = jQuery(this).data("id");
jQuery.ajax({
type: "POST",
url: ajaxurl,
data: {'action': 'more_content','the_ID': post_id},
dataType: 'json',
success: function (data) {jQuery('#window-post').html(data);}
});
});
});
2
Answers
You need to call the function once the ajax is loaded.
Something like this:
Your code binds the click handler on all
.im-x-mark
elements that exist when the page is loaded. However the content of your ajax call does not exist yet after page load. Therefore the click handler is not bound to these elements.The best option would be to use event delegation. Assuming
#window-post
is the closest static parent element you could do the event delegation from there. JQuery has great support for that by using the on function with the optional selector parameter.See https://api.jquery.com/on/
The code would look like this.