CODEWITHSUNDEEP
javascriptjquerymediaelement.jsmediaelement
Mark Smith
Mark Smith

Reputation: 11

Click event not working

I'm using mediaelement.js to play audio files. What I'm trying to do is track first button click and send it to Google analytics and then replace element class so second click won't be sent to GA. Here's the code:

$(function () {
    $(".aud-not-played .mejs-play").click(function () {
        $('.aud-not-played').attr('class', 'aud-played');
        setTimeout("_gaq.push(['_trackEvent', 'Audio', 'Play', 'audtitle'])", 10000);
    })
});

And HTML code:

<div class="aud-not-played">
  <div id="mep_0" class="mejs-container svg  mejs-audio " style="width: 600px; height: 30px;">
    <div class="mejs-inner">
      <div class="mejs-mediaelement">
        <audio src="http://users.skynet.be/fa046054/home/P22/track06.mp3" style="display: none;">

        </audio>
      </div>
      <div class="mejs-layers">
        <div class="mejs-poster mejs-layer" style="display: none; width: 600px; height: 30px;">
        </div>
      </div>
      <div class="mejs-controls">
        <div class="mejs-button mejs-playpause-button mejs-play">
          <button type="button" aria-controls="mep_0" title="Play/Pause">
          </button>
        </div>
      </div>
      <div class="mejs-clear">
      </div>
    </div>
  </div>
</div>

For some reason when I click on play button, code isn't executing. Do you know what could be the reason? Thanks

UPD: I replaced GA code with simple alert('Works!') to see if it's working:

$(function () {
    $(".aud-not-played .mejs-play").click(function () {
        alert('Works!');
        $('.aud-not-played').attr('class', 'aud-played');
    })
});

Upvotes: 1

Views: 1020

Answers (4)

Ryan Thompson
Ryan Thompson

Reputation: 11

I was having a very similar issue and found the only solution to be using a plugin along with the following function. Note, this has to be run on full page load and not page ready.

Plugin: http://weblog.west-wind.com/posts/2014/Oct/20/A-jquerywatch-Plugin-for-watching-CSS-styles-and-Attributes

$(window).load(function() {
    // Monitor play buttons
    $(".mejs-playpause-button").watch({
        properties: "top,left,opacity,attr_class",
        // Callback function when a change is detected
        callback: function(data, i) {
            if($(this).hasClass('mejs-pause')) {
                setTimeout("_gaq.push(['_trackEvent', 'Audio', 'Play', 'audtitle'])", 10000);
            }
        }
    });
});

Upvotes: 1

Leon
Leon

Reputation: 6069

Maybe you need to programmatically add an event Listener along the lines...

$('.mejs-playpause-button button[title="Play/Pause"]').on('click', function(e) {
//Do Whatever you want here        
console.log('addEventListener - playing') ;
});

Upvotes: 0

imVJ
imVJ

Reputation: 424

Use live function of jquery.

$(function () {
    $(".aud-not-played .mejs-play").live('click',function () {
        $('.aud-not-played').attr('class', 'aud-played');
        setTimeout("_gaq.push(['_trackEvent', 'Audio', 'Play', 'audtitle'])", 10000);
     })
});

Upvotes: 0

Johan
Johan

Reputation: 35213

$(document).on('click', '.aud-not-played .mejs-play', function () {

    if(!$(this).data('isClicked')) //if it the first click
        setTimeout("_gaq.push(['_trackEvent', 'Audio', 'Play', 'audtitle'])", 10000);

    $(this).data({ isClicked: true }); //store the click check in jquerys cache
})

Upvotes: 0

Related Questions