如何定位在ajax中调用的div中正在单击的类

Question

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

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

然后，我如何轻松地将ajax中调用的div中的一个类(关闭windowpost(作为关闭这个类的目标。在我的类似问题中，答案讲述了另一个ajax调用，该调用针对ajax中调用的div中的特定类。

唯一有效的想法是将目标锁定在ajax中调用的div周围(windowpost(：

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

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

Admin-ajax.php

callajax.php

myJquery.js文件

我已经在myJquery.js.中添加了"jQuery(document(.ready(function((｛">

(编辑(这是我与您的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

您的代码将点击处理程序绑定到页面加载时存在的所有.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();
});

Answer 2

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