我有一个基本上是动态创建的页面（这是键），在这个页面中我有div，每个div应该播放/暂停一首歌。
如果我提出警告，代码就可以工作，这让我相信存在异步问题。所以当我调用播放/暂停时，我尝试添加超时，但这也没有用。
代码如何正常运行是第一个div功能完美无缺，但除非我发出警报，否则任何其他div都不起作用。
有没有人遇到过这样的问题？
这是我的代码，我使用livequery来获取动态元素。
编辑：
现在的问题是，只有第一首歌正在播放，当我点击其他歌曲的播放/暂停按钮时没有任何反应。
function callAction(url) {
if (url == "music.html") {
var believe = new Audio('/assets/music/believe.mp3');
var hope = new Audio('/assets/music/hope.mp3');
var alf = new Audio('/assets/music/alf.mp3');
var thatnight = new Audio('/assets/music/thatnight.mp3');
var lostlove = new Audio('/assets/music/lostlove.mp3');
var time = new Audio('/assets/music/time.mp3');
$("body").on("click", ".pausebutton", function(){
var song = $(this).attr('name');
if (song != null && song == "believe") {
believe.pause();
}
if (song != null && song == "hope") {
hope.pause();
}
if (song != null && song == "alf") {
alf.pause();
}
if (song != null && song == "thatnight") {
thatnight.pause();
}
if (song != null && song == "lostlove") {
lostlove.pause();
}
if (song != null && song == "time") {
time.pause();
}
});
$("body").on("click", ".playbutton" ,function(){
var song = $(this).attr('name');
if (song != null && song == "believe") {
believe.play();
}
if (song != null && song == "hope") {
hope.play();
}
if (song != null && song == "alf") {
alf.play();
}
if (song != null && song == "thatnight") {
thatnight.play();
}
if (song != null && song == "lostlove") {
lostlove.play();
}
if (song != null && song == "time") {
time.play();
}
});
}
}
不是说html真的会有所作为，但这里是html：
<div id="music">
<h1>Music</h1>
<br><br>
<div class="row">
<div class="musicEntry red">
<center><p class="musicTitle">Believe</p></center>
<center><p class="musicDate">July 27th 2014</p></center>
<div class="audio-controls">
<center><i name="believe" class="fa fa-play-circle fa-3x playbutton"></i></center>
<center><i name="believe" class="fa fa-pause fa-3x pausebutton"></i></center>
</div>
</div>
<div class="musicEntry red">
<center><p class="musicTitle">A Little Hope</p></center>
<center><p class="musicDate">March 8th 2014</p></center>
<div class="audio-controls">
<center><i name="hope" class="fa fa-play-circle fa-3x playbutton"></i></center>
<center><i name="hope" class="fa fa-pause fa-3x pausebutton"></i></center>
</div>
</div>
<div class="musicEntry red">
<center><p class="musicTitle">Alf Layla</p></center>
<center><p class="musicDate">April 23rd 2014</p></center>
<div class="audio-controls">
<center><i name="alf" class="fa fa-play-circle fa-3x playbutton"></i></center>
<center><i name="alf" class="fa fa-pause fa-3x pausebutton"></i></center>
</div>
</div>
</div>
<div class="row">
<div class="musicEntry red">
<center><p class="musicTitle">That Night</p></center>
<center><p class="musicDate">March 21th 2013</p></center>
<div class="audio-controls">
<center><i name="thatnight" class="fa fa-play-circle fa-3x playbutton"></i></center>
<center><i name="thatnight" class="fa fa-pause fa-3x pausebutton"></i></center>
</div>
</div>
<div class="musicEntry red">
<center><p class="musicTitle">Lost Love</p></center>
<center><p class="musicDate">July 30th 2012</p></center>
<div class="audio-controls">
<center><i name="lostlove" class="fa fa-play-circle fa-3x playbutton"></i></center>
<center><i name="lostlove" class="fa fa-pause fa-3x pausebutton"></i></center>
</div>
</div>
<div class="musicEntry red">
<center><p class="musicTitle">Time (Cover)</p></center>
<center><p class="musicDate">July 26th 2012</p></center>
<div class="audio-controls">
<center><i name="time" class="fa fa-play-circle fa-3x playbutton"></i></center>
<center><i name="time" class="fa fa-pause fa-3x pausebutton"></i></center>
</div>
</div>
</div>
</div>
这只是播放和暂停第一首歌。你知道为什么吗？
答案 0 :(得分：1)
问题是您的点击事件和动态加载的页面。如果您的DOM上有动态添加的元素，请使用$(selector).on('click', function(e){})而不是点击事件。下面是修改后的处理程序：
$(".playbutton").on("click", function(){
// Your code goes here
});
答案 1 :(得分：1)
看看这个jsfiddle
如果你使用JSFiddle中描述的Inder方法它也不起作用。出于某种原因，你必须像这样附上它：
$("#container").on("click",".pausebutton",function(e){...});
第一个选择器可以是任何包含元素，例如$（＆＃34; body＆＃34;）。
考虑一下......
解释很可能是因为您将事件附加到顶部元素，而不是动态元素。每次单击周围的容器时，都会捕获该事件，并且无论您是否单击了＆＃34; .pausebutton＆＃34;子元素。换句话说，使用紧密封装动态加载元素的专用div更有效，而不是仅仅将其附加到正文。否则它会在整个地方抛出事件。
附加这样的事件并不起作用：
$(".pausebutton").on("click",function(e){...});
$(".pausebutton").click(function(e){...});
相关问题：
答案 2 :(得分：0)
我通过将livequery取出来解决了一些问题。
当我使用$ .get（url）获取动态内容时，我创建了一个充当开关的函数。所以像这样：
//Get the page here
$.get(url, function() {
//replace content of the page here
callAction(url);
});
// This acts as a switch statement, the javascript is being called just fine, and the code works perfectly now.
function callAction(url) {
if (url == "music.php"){
// do the following here
}
if (url == "blog.php"){
// do the following here
}
}
这对我有用。我不再需要使用livequery了。那个插件很糟糕。