I am trying to figure out what button a user has clicked inside a DIV container, but I must be doing something wrong here. I keep getting a no attributes error. Can anyone tell me if I am doing something wrong? Here is my JS:

// Bind ButtonClicks
$('#jplayers .button').on("click",function(e){
    alert("Class :" + e.attr("class"));
    // Determin what button
    if(  e.attr("class").indexOf("play") > 0 ){
        // Play Clicked
        player.jPlayer("play");
    }else{
        // Pause Clicked
        player.jPlayer("pause");
    }
}); 

Here is my HTML:

    <div id="jplayers">
        <!--First Player-->
        <div id="zen_1">
            <span class="player"></span>
            <span class="circle"></span>
            <span class="progress"></span>
            <span class="buffer"></span>
            <span class="drag"></span>
            <div class="button">
                <span class="icon play"></span>
                <span class="icon pause"></span>
            </div>
        </div>
        <!--Second Player-->
        <div id="zen_2">
            <span class="player"></span>
            <span class="circle"></span>
            <span class="progress"></span>
            <span class="buffer"></span>
            <span class="drag"></span>
            <div class="button">
                <span class="icon play"></span>
                <span class="icon pause"></span>
            </div>
        </div>
    </div>

Thanks for any help

I am trying to figure out what button a user has clicked inside a DIV container, but I must be doing something wrong here. I keep getting a no attributes error. Can anyone tell me if I am doing something wrong? Here is my JS:

// Bind ButtonClicks
$('#jplayers .button').on("click",function(e){
    alert("Class :" + e.attr("class"));
    // Determin what button
    if(  e.attr("class").indexOf("play") > 0 ){
        // Play Clicked
        player.jPlayer("play");
    }else{
        // Pause Clicked
        player.jPlayer("pause");
    }
}); 

Here is my HTML:

    <div id="jplayers">
        <!--First Player-->
        <div id="zen_1">
            <span class="player"></span>
            <span class="circle"></span>
            <span class="progress"></span>
            <span class="buffer"></span>
            <span class="drag"></span>
            <div class="button">
                <span class="icon play"></span>
                <span class="icon pause"></span>
            </div>
        </div>
        <!--Second Player-->
        <div id="zen_2">
            <span class="player"></span>
            <span class="circle"></span>
            <span class="progress"></span>
            <span class="buffer"></span>
            <span class="drag"></span>
            <div class="button">
                <span class="icon play"></span>
                <span class="icon pause"></span>
            </div>
        </div>
    </div>

Thanks for any help

• javascript
• jquery
• css
• html

• e is the event, not the element clicked. use this to access the element – juvian Commented Apr 18, 2014 at 17:15
• although if you are hellbent on using the event, I think you can access the element by using e.currentTarget. But using this makes much more sense :) – bottens Commented Apr 18, 2014 at 17:21

2 Answers 2

You can get the class by using this.

$(this).attr("class")

The e that you're using isn't the element but the click event.

$('#jplayers .button').on("click",function(e){
    alert("Class :" +  $(this).attr("class"));
});

Here in your case you can make use of the e parameter in the callback method in the click event.

e.target returns the respective element this being clicked by the user.

$('#jplayers').on("click", function (e) {
    // using this you can access the specific element 
    var className = $(e.target).prop('class');
    if (className.indexOf("play") !== -1 || className.indexOf('pause') !== -1) {
        alert(className);
        // you can access it using $(e.target)
    }
});

JSFiddle (with a simple sample code)