Question

问题：我无法删除之前通过jquery添加的类。

情况如下，我有一个div出现ajax内容。

点击链接时，＃ajax_wrapper会淡入。

这很有效。加载Ajax的帖子内容被加载到我创建的div中：#ajax_wrapper。它保存在内容中，使用名为Essential Grid的插件加载此内容。

我的自定义是创建一个包装器，以个性化的方式显示内容。

jQuery(document).ready(function( $ ) {
  $('.eg-ajax-a-button').on('click', function() { 
  $('#ajax_wrapper').toggleClass('displayon');

});

在Ajax内容div中，由基本网格管理，是一个X（关闭链接）来关闭ajax加载的内容。这适用于ajax内容，但包装器仍然是所有内容。

我尝试听X关闭链接，所以当它被点击时，它也会删除/切换之前添加到#ajax_wrapper的类.displayon。

我似乎无法做得对。单击.eg-ajax-closer-wrapper时没有任何反应。这是因为它在ajax加载的div里面吗？

这就是我试过的

jQuery(document).ready(function( $ ) {
  $('.eg-ajax-closer-wrapper').on('click', function() { 
  $('#ajax_wrapper').toggleClass('displayon');
}); 
});

HTML看起来像这样：

<div id="ajax_wrapper" class="displayon">
<div class="eg-ajax-target-container-wrapper " id="sp-content-ajax">
    <!-- CONTAINER FOR PREFIX -->
    <div class="eg-ajax-target-prefix-wrapper">
    </div>
    <!-- CONTAINER FOR CONTENT TO LOAD -->
    <div class="eg-ajaxanimwrapper" style="position: relative; overflow: hidden; height: auto; z-index: 0; min-height: 0px; max-height: none;"><div class="eg-ajax-target" style="visibility: inherit; opacity: 1; height: auto;"><div class="eg-ajax-closer-wrapper eg-acp-tr eg-acp-light eg-acp-type1"><div class="eg-ajax-closer eg-ajax-navbt">X</div></div><h2>Title sample</h2>
<p>Lorem Ipsum is simply dummy.</p>
</div></div>
    <!-- CONTAINER FOR SUFFIX -->
    <div class="eg-ajax-target-sufffix-wrapper">
    </div>
</div>
</div>

Answer 1

我想你需要事件委托：

$(document).on('click', '.eg-ajax-closer-wrapper',   function() { 
     $('#ajax_wrapper').toggleClass('displayon');
 });

问题是，您的内容是在页面加载后加载的，因此静态元素的事件绑定已经完成，因为它们存在于DOM中。

但是内容不存在，因此目标元素上的事件没有绑定。在这种情况下，我们需要将事件委托给静态父级或document，因为它始终可用。

Answer 2

当您在DOMReady上为元素添加侦听器时，您只需将其添加到当时选择器匹配的元素。

如果在您的AJAX请求之后向文档添加新元素，则这些元素不会自动监听该事件。

为此，您需要使用event delegation（请参阅＆＃34;直接和委派活动＆＃34;）

通过单击ajax加载的内容元素从div中删除以前添加的类

2 个答案: