Javascript 使用AJAX加载内容后,音频不会播放
首先,我是jquery新手,我尝试过用谷歌搜索我的问题,花了几个小时来解决这个问题,但我找不到任何问题,所以我来了 在下面的代码中,我从数据库中获取了一些信息(歌曲详细信息),并通过ajax将它们加载到div中。。到目前为止,一切正常 用于通过AJAX加载内容的脚本Javascript 使用AJAX加载内容后,音频不会播放,javascript,jquery,ajax,audio,Javascript,Jquery,Ajax,Audio,首先,我是jquery新手,我尝试过用谷歌搜索我的问题,花了几个小时来解决这个问题,但我找不到任何问题,所以我来了 在下面的代码中,我从数据库中获取了一些信息(歌曲详细信息),并通过ajax将它们加载到div中。。到目前为止,一切正常 用于通过AJAX加载内容的脚本 $(document).ready(function() { $("#results" ).load( "ajax/profile_ajax.php"); //load initial records
$(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 -->
$(文档).ready(函数(){
$(“#results”).load(“ajax/profile_ajax.php”);//加载初始记录
//当用户单击分页链接时,执行下面的代码
$(“#结果”)。在(“单击”,“分页a”,函数(e){
e、 预防默认值();
$(“.loading div”).show();//显示加载元素
var page=$(this).attr(“数据页”);//从链接获取页码
$(“#results”).load(“ajax/profile_ajax.php”,{“page”:page},function(){//get content from php page
$(“.loading div”).hide();//完成后,隐藏加载元素
});
});
});
我用来播放音频的脚本
$(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;
});
});
$(函数(){
库劳迪奥变种;
$(“.playback”)。单击(函数(e){
e、 预防默认值();
var song=$(this.next('audio')[0];
if(curAudio&&song!=curAudio&&!curAudio.暂停){
暂停();
$(curAudio.prev().html('Play');
}
如果(歌曲暂停){
歌曲。游戏();
库拉索迪奥=歌曲;
$(this.html('Stop');
}否则{
歌曲。暂停();
curAudio=未定义;
$(this.html('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">
曲目名称:-英雄
作者:
玩
分享
我真正需要的是使用我发布的第二个脚本(音频)播放获取的内容。我不知道如何解决这个问题。尝试了数小时的谷歌搜索和各种建议方法。他们都不为我工作。请指出哪里出了问题。我真的很感激 使用以下代码播放音频。您还可以选择将事件附加到动态创建的元素。事件委派允许我们将单个事件侦听器附加到父元素,该事件侦听器将为与选择器匹配的所有子体触发,无论这些子体现在存在还是将来添加
$(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;
});
});
$(函数(){
库劳迪奥变种;
$(文档).on('click',.playback',函数(e){
e、 预防默认值();
var song=$(this.next('audio')[0];
if(curAudio&&song!=curAudio&&!curAudio.暂停){
暂停();
$(curAudio.prev().html('Play');
}
如果(歌曲暂停){
歌曲。游戏();
库拉索迪奥=歌曲;
$(this.html('Stop');
}否则{
歌曲。暂停();
curAudio=未定义;
$(this.html('Play');
}
curPlaying=$(this).parent()[0].id;
});
});
表示它如何不工作。。你做了什么??更新问题我无法更新问题。。相反,我粘贴了代码。请检查一下。。很appreciated@SithiraMunasinghe我在您的html中找不到此表单$(这个)。最近的('form')@SithiraMunasinghe如果可能,请创建小提琴。此代码来自none Ajax加载内容。。它可以在小提琴中工作,但不能在AJAX加载中工作。请看一看