Question

首先是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');
    });

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

$(this).parent().find('.shareoptions').removeClass('hide');

删除Ajax加载内容上的css类

3 个答案: