Question

我正在使用mediaelement.js来播放音频文件。我要做的是跟踪第一个按钮点击并将其发送到Google分析，然后替换元素类，以便第二次点击不会发送到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：我用简单的警报替换了GA代码（'Works！'），看看它是否正常工作：

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

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

Answer 2

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

Answer 3

使用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);
     })
});

Answer 4

也许你需要以编程方式添加一个事件监听器......

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

点击事件不起作用

4 个答案: