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

Question

我有一个基本上是动态创建的页面(这是关键)，在这个页面中我有 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>

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

Answer 1

问题是您的点击事件和动态加载的页面。当 DOM 上有动态添加的元素时，请使用 $(selector).on('click', function(e){}) 而不是点击事件。以下是修改后的处理程序:

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