1

我正在使用 mediaelement.js 播放音频文件。我要做的是跟踪第一次按钮点击并将其发送到谷歌分析，然后替换元素类，这样第二次点击就不会发送到 GA。这是代码：

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

和 HTML 代码：

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

出于某种原因，当我单击播放按钮时，代码没有执行。你知道可能是什么原因吗？谢谢

UPD：我用简单的 alert('Works!') 替换了 GA 代码，看看它是否有效：

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

4 回答 4

1

我遇到了一个非常相似的问题，并找到了使用插件和以下功能的唯一解决方案。请注意，这必须在整页加载时运行，而不是页面就绪。

插件： 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);
            }
        }
    });
});
于 2014-12-05T23:49:42.407 回答
0 
$(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
})
于 2013-01-15T11:05:50.410 回答
0

使用jquery 的live功能。

$(function () {
    $(".aud-not-played .mejs-play").live('click',function () {
        $('.aud-not-played').attr('class', 'aud-played');
        setTimeout("_gaq.push(['_trackEvent', 'Audio', 'Play', 'audtitle'])", 10000);
     })
});
于 2013-01-15T11:07:35.037 回答
0

也许您需要以编程方式添加事件侦听器...

$('.mejs-playpause-button button[title="Play/Pause"]').on('click', function(e) {
//Do Whatever you want here        
console.log('addEventListener - playing') ;
});
于 2014-01-30T19:49:32.840 回答