使用 AJAX 加载内容后无法播放音频

Posted 2023-02-25

【中文标题】使用 AJAX 加载内容后无法播放音频

【英文标题】：Audio wont play after loading contents with AJAX

【发布时间】：2015-03-25 09:22:47

【问题描述】：

首先，我是 jquery 的新手，我尝试用谷歌搜索我的问题，花了几个小时来解决这个问题，但我找不到任何问题，所以我在这里。

在下面的代码中，我从数据库中获取了一些信息（歌曲详细信息）并通过 ajax 将它们加载到 div 中。到目前为止，一切正常。

用于通过 AJAX 加载内容的脚本

    $(document).ready(function() 
        $("#results" ).load( "ajax/profile_ajax.php"); //load initial records

        //executes code below when user click on pagination links
        $("#results").on( "click", ".pagination a", function (e)
            e.preventDefault();
            $(".loading-div").show(); //show loading element
            var page = $(this).attr("data-page"); //get page number from link
            $("#results").load("ajax/profile_ajax.php","page":page, function() //get content from PHP page
                $(".loading-div").hide(); //once done, hide loading element
            );

        );
    );


<div class="loading-div"><img src="../pagination/ajax-loader.gif" ></div>
<div id="results"></div><!-- content will be loaded here -->

用于播放音频的脚本

$(function () 
    var curAudio;
    $(".playback").click(function (e) 
        e.preventDefault();
        var song = $(this).next('audio')[0];

        if (curAudio && song != curAudio && !curAudio.paused) 
            curAudio.pause();
            $(curAudio).prev().html('<i class="fa fa-play"></i> Play');
        

        if (song.paused) 
            song.play();
            curAudio = song;
            $(this).html('<i class="fa fa-pause"></i> Stop');
         else 
            song.pause();
            curAudio = undefined;
            $(this).html('<i class="fa fa-play"></i> Play');
        
        curPlaying = $(this).parent()[0].id;
    );
);

我有上面的代码来播放获取的音乐。现在的问题是，即使我的代码在我使用 AJAX 之前运行良好，但所有按钮都不起作用。

我的 Fecthed HTML 是这样的

<div id="4">
Track Name :- <b>Heros</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/Heros.mp3">
    Your browser does not support HTML5 audio.
</audio>
<a class="btn btn-sm btn-success hdnbtn" href="../members/downloader.php?fld=1&name=Heros.mp3" name="dwn"><i class="fa fa-download"></i> Download MP3</a>
<button class="sharer btn btn-sm btn-danger hdnbtn" type="button"><span class="fa fa-share-alt"></span> Share</button>
<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>
<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="Heros.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMS9IZXJvcy5tcDM=" name="link">

我真正需要的是使用我发布的第二个脚本（音频）播放获取的内容。我不知道如何解决这个问题。尝试了数小时的谷歌搜索和各种建议的方法。他们都没有为我工作。请指出出了什么问题。我真的很感激！

【参考方案1】：

使用下面的代码播放音频。您还检查Event delegation 将事件附加到动态创建的元素。事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。

 $(function () 
   var curAudio;
   $(document).on('click',".playback",function (e) 
    e.preventDefault();
    var song = $(this).next('audio')[0];

    if (curAudio && song != curAudio && !curAudio.paused) 
        curAudio.pause();
        $(curAudio).prev().html('<i class="fa fa-play"></i> Play');
    

    if (song.paused) 
        song.play();
        curAudio = song;
        $(this).html('<i class="fa fa-pause"></i> Stop');
     else 
        song.pause();
        curAudio = undefined;
        $(this).html('<i class="fa fa-play"></i> Play');
    
    curPlaying = $(this).parent()[0].id;
   );
 );

【讨论】：

表示它如何不起作用.. 你做了什么？？有问题的更新

我无法更新问题.. 我粘贴了代码link。请检查它.. 非常感谢

@SithiraMunasinghe 我在你的 html 中找不到这个表格？ $(this).closest('form')

@SithiraMunasinghe 如果可能，请创建小提琴。

Fiddle 此代码来自无 Ajax 加载内容。它在小提琴中有效，但不适用于 AJAX 加载。请看一下