jquery/javascript播放/停止异步问题

我有一个基本上是动态创建的页面（这是关键），在这个页面中我有div，每个div都应该播放/暂停一首歌

如果我发出警报，代码就会工作，这让我相信存在异步问题。所以我尝试在调用play/pause时添加一个超时，但这也不起作用

代码目前的行为方式是第一个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>

音乐



相信

2014年7月27日

一点希望

2014年3月8日

阿尔夫·莱拉

2014年4月23日

那天晚上

2013年3月21日

失去的爱

2012年7月30日
时间（封面）

2012年7月26日

---

这只是播放和暂停第一首歌。你知道为什么吗？

问题在于你的点击事件和动态加载页面。当DOM上有动态添加的元素时，使用

$（选择器）.on（'click'，function（e）{}）

，而不是单击事件。下面是修改后的处理程序：

$(".playbutton").on("click", function(){
    // Your code goes here
});

---

我通过删除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
    }
}

$("#container").on("click",".pausebutton",function(e){...});

---

这对我有用。我不必再使用livequery了。那个插件太糟糕了

看看这个jsfiddle

如果使用JSFIDLE中描述的Inder方法，它也不起作用。出于某种原因，您必须像这样附加它：

//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
    }
}

$("#container").on("click",".pausebutton",function(e){...});

第一个选择器可以是任何包含元素，例如$（“body”）

想想看

这种解释很可能是因为您将事件附加到顶部元素，而不是动态元素。每次单击周围的容器时，都会捕获事件，并检查是否单击了“.pausebutton”子元素。换句话说，使用一个专门的div将动态加载的元素紧密封装起来，而不是仅仅将其附加到主体上，这样性能更高。否则，它将把事件扔得到处都是

附加这样的事件不起作用：

$(".pausebutton").on("click",function(e){...});

相关问题：

---

您好，谢谢您的回复。我试过了，没有什么不同，似乎livequery是停止我的代码的原因。我找到了一种破解动态页面的方法。我把我的解决方案放在上面。我现在正在研究你的解决方案：）我注意到我的代码仍然运行异常。只有第一首歌在播放。。我想要你提供的小提琴的确切功能。因此，我将尝试看看您所做的，并将其应用到我的代码中。我太困惑了。。JS fiddle的功能就像我所希望的那样工作。尽管div是静态的，但从某种意义上说，它们不是动态添加的。我确实更新了代码，将$（“body”）.on（“click”，“.play/pausebutton”，function（）{}）；在模仿了JS提琴并修复了点击功能之后，我仍然会遇到同样的恼人的错误：（我会更仔细地观察JS提琴和我的代码，看看是否有任何其他差异。我已经更新了上面的代码，以包含我的新代码。