删除Ajax加载内容上的css类

Remove css classes on Ajax loaded content

本文关键字：css Ajax 加载 删除      更新时间：2023-09-26

首先，我是Jquery Ajax的新手。我已经使用ajax加载方法将一些内容加载到DIV中，到目前为止，所有的编码都很好。我有一个小的共享按钮，一旦被点击，它将向3个按钮和它自己添加一个类。我使用了一个脚本来完成这个功能，但该脚本不适用于Ajax。我花了几个小时在谷歌上寻找解决方案，但没有一个提出的解决方案对我有效。所以我来了。下面是一段将通过ajax加载到div 中的内容

<div id="2">
        Track Name :- <b>Wiggle</b>
        <br>By :- <a target="_blank" href="../members/profile.php?id=1">USER NAME</a>
        <br>
        <button class="playback btn btn-primary btn-sm hdnbtn"><i class="fa fa-play"></i> Play</button>
        <audio src="../members/memberfiles/1/Wiggle.mp3">
            Your browser does not support HTML5 audio.
        </audio>
        <a class="btn btn-sm btn-success hdnbtn" href="downloader.php?fld=1&amp;name=Wiggle.mp3" name="dwn"><i class="fa fa-download"></i> Download MP3</a>
            <button class="btn btn-primary sharebtn"> Share</button>
            <div class="shareoptions hide">
                <a target="_blank" href="#" class="hide btn btn-sm btn-social btn-facebook socialhdn"><i class="fa fa-facebook"></i>  Share on Facebook</a>
                <a target="_blank" href="#" class="hide btn btn-sm btn-social btn-twitter socialhdn"><i class="fa fa-twitter"></i>  Tweet this </a>
                <a target="_blank" href="#" class="hide btn btn-sm btn-social btn-google-plus socialhdn"><i class="fa fa-google-plus"></i>  Share on goole</a>
            </div>
        <br>
        <a href="javascript:void();" class="cls_close hide btn-primary btn btn-xs"><i class="fa fa-minus"> Show Less</i></a>
        <input type="hidden" value="Wiggle.mp3" name="file_name">
        <input type="hidden" value="#" name="link">
    </div>

我尝试过使用on（）方法和live（）方法，尽管live已经贬值。但我不能让它正常工作。当我点击按钮时，我得到了Javascript消息，但它根本没有删除"隐藏"类

$(document).on('click' , '.sharebtn' , function(){
        $(this).closest('audio').find('.shareoptions').removeClass('hide');
        alert('Test');
    });

如果你能给我一个解决方案，并指出哪里出了问题，我会非常感激的。

.closest遍历父元素。由于audio不是.sharebtn的父级，因此$(this).closest('audio')将不返回任何内容。

但是.shareoptions是.sharebtn的兄弟，所以只使用.siblings()或.next()。

$(this).next('.shareoptions').removeClass('hide');

您已经使用了closest('audio')，它在父层次结构中查找元素，而不查找。在您的情况下，音频是.sharebtn的兄弟。

你必须在相同级别的按钮上找到shareoptions，请参阅下面的代码

$(document).on('click' , '.sharebtn' , function(){
    $(this).next('.shareoptions').removeClass('hide');
    alert('Test');
});

除了其他两个答案，您还可以使用以下解决方案：

$(this).parent().find('.shareoptions').removeClass('hide');
相关文章：