如何定位在 ajax 中调用的 div 中被点击的 class

Question

首先，您能解释一下浏览器如何存储在 ajax 中调用的 div 的内容吗？

我不明白为什么在ajax中调用并显示在浏览器检查器中的内容不能用jquery直接定位。

然后，我怎样才能轻松地在 ajax 中调用的 div 中定位一个 class (close-window-post) 来关闭它一。在我的类似问题中，答案讲述了在 ajax.

调用的 div 中对目标特定 class 的另一个 ajax 调用

唯一认为可行的方法是将 div 围绕 (window-post) ajax 中调用的 div 作为目标：

<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>

我的脚本

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

我的脚本按以下顺序调用：

管理员-ajax.php

通话ajax.php

myJquery.js 文件

我已经在myJquery.js中添加了"jQuery(document).ready(function(){"。

(edit) 这是我与您的 ajax 通话：

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

Answer 1

加载 ajax 后，您需要调用该函数。像这样：

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

Answer 2

您的代码将点击处理程序绑定到加载页面时存在的所有 .im-x-mark 元素上。但是，您的 ajax 调用的内容在页面加载后尚不存在。因此，点击处理程序未绑定到这些元素。

最好的选择是使用事件委托。假设 #window-post 是最接近的静态父元素，您可以从那里进行事件委托。 JQuery 通过使用带有可选选择器参数的 on 函数对此提供了很好的支持。

见https://api.jquery.com/on/

代码如下所示。

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

如何定位在 ajax 中调用的 div 中被点击的 class

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

ajax

jquery

class

target