Question posted in
You can find the official documentation here.

How to target class that is being clicked inside a div called in ajax – Jquery ajax

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);}
  });
});
});
Tags:

2

Answers


  1. 0

    You need to call the function once the ajax is loaded.
    Something like this:

    function callAfterAjaxPost() {
    jQuery('#window-post').find('.im-x-mark').on('click',function(){
        jQuery('#window-post').addClass('dis-none');   
        // Or jQuery('#window-post').hide();
    });
}

$.ajax({
  url: "callajax.php",
  context: document.body
}).done(function() {
  callAfterAjaxPost(); // Call function
});
    Login or Signup to reply.
  2. 0

    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.

    jQuery('#window-post').on('click', '.im-x-mark', function(){
    jQuery('#window-post').addClass('dis-none');   
    // Or jQuery('#window-post').hide();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search