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

时间:2014-07-28 18:58:08

标签: javascript jquery audio

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

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

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

看看这个jsfiddle

http://jsfiddle.net/cVjg9/1/

如果你使用JSFiddle中描述的Inder方法它也不起作用。出于某种原因,你必须像这样附上它:

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

第一个选择器可以是任何包含元素,例如$(&#34; body&#34;)。

考虑一下......

解释很可能是因为您将事件附加到顶部元素,而不是动态元素。每次单击周围的容器时,都会捕获该事件,并且无论您是否单击了&#34; .pausebutton&#34;子元素。换句话说,使用紧密封装动态加载元素的专用div更有效,而不是仅仅将其附加到正文。否则它会在整个地方抛出事件。

附加这样的事件并不起作用:

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

http://jsfiddle.net/J2LYX/

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

http://jsfiddle.net/X2rbJ/

相关问题:

In jQuery, how to attach events to dynamic html elements?

答案 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了。那个插件很糟糕。