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

Question

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

Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Andreas, Mar 08 '20 at 18:43

score 0 · Answer 1 · answered Mar 08 '20 at 18:45

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

answered Mar 08 '20 at 18:45

DonkeyKong

1,202
12
12

Thanks. I thought I could work for all ajax but I work on Wordpress. Must I transfer my post on http://wordpress.stackexchange.com/ ? – Rak Arthus Mar 08 '20 at 22:37
I added ajax cal lin my first post – Rak Arthus Mar 08 '20 at 22:43
I used old ajax functions . I tried with this script but it still doesn't work ! first question edited. thanks – Rak Arthus Mar 09 '20 at 11:08
Does your on click event work if you hard code the div in the page without using ajax? – DonkeyKong Mar 09 '20 at 12:16

Mark Baijens · Accepted Answer · 2020-03-09T11:30:25.617

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();
});

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

2 Answers2