音頻與AJAX

Question

首先即時通訊新jQuery的我已經試着用搜索引擎我的問題是因爲加載內容之後不會玩，花了很多時間來解決這一點，我找不到任何，所以我在這裏。

在下面的代碼中，我已經賺得了從數據庫中的一些信息（歌曲的詳細信息），並加載它們通過AJAX div的..到目前爲止一切正常就好了。使用

腳本使用播放音頻

$(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

$(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 --> 

加載內容的IM。現在的問題是，即使我的代碼在我使用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"> 

我真正需要的是發揮使用第二腳本（音）在i貼獲取內容。我不知道如何解決這個問題。嘗試了幾小時的谷歌搜索和各種建議的方法。他們都沒有爲我工作。請指出出了什麼問題。對此，我真的非常感激 ！

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