jquery/javascript play/stop asynchronous issue

Question

I have a page that is essentially dynamically created (this is key), and in this page I have divs, and each div is supposed to play/pause a song.

The code works if I put alert, so that led me to believe that there is an asynchronous issue. So I tried to add a timeout to when I call play/pause, but that didn't work either.

How the code behaves right now is the first div functions flawlessly, but any other div does not work unless I put an alert.

Has anyone had experience with such an issue?

This is my code, I'm using livequery to pick up the dynamic elements.

---

EDIT:

The problem now is that only the first song is being played, nothing happens when I click play/pause buttons for the other songs.

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();
            }
        });
    }
}

Not that html would really make a difference, but here is the 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>

This is only playing and pausing the first song. Do you have any idea why?

Answer 1

I solved some of the problem by taking livequery out.

While I am getting my dynamic content using $.get(url), I made a function that acts as a switch. So something like this:

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

This worked for me. I didn't have to use livequery anymore. That plugin is terrible.

Answer 2

Have a look at this jsfiddle

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

If you use the method Inder described in the JSFiddle it doesn't work either. For some reason you have to attach it like this:

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

The first selector can be any containing element, for example $("body").

Thinking about it...

The explanation is most likely because you're attaching the event to the top element, not the dynamic element. Every time you click on the surrounding container, the event will be caught and a check will be done whether you clicked on a ".pausebutton" sub-element. In other words, it's more performant to use a dedicated div which closely encapsulated the dynamically loaded elements, instead of just attaching it to the body. Otherwise it will throw events all over the place.

Attaching events like this doesn't work:

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

http://jsfiddle.net/J2LYX/

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

http://jsfiddle.net/X2rbJ/

Related question:

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

Answer 3

The issue is your click event and dynamically loaded page. When there are dynamically added elements on your DOM, use $(selector).on('click', function(e){}) instead of click events. Below is the modified handler:

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