Question

我正在使用jwplayer最新版本6.8。当用户在播放器中点击我的徽标时，我尝试使用jQuery调用函数，但它不起作用。

这是HTML中播放器的徽标图片代码：

<img class="jwlogo" id="container_logo" src="..." />

这是jQuery函数：

<script type="text/javascript">
  $(document).ready(function(){            
    $("#container_logo").click(function() { 
      alert('Work!');
    });               
  });                  
</script>

这是测试页：http://vt-test.co.nf

请帮忙吗？

Answer 1

由于您使用的是jQuery 1.3，请尝试使用jQuery.live，如下所示：

$('#container_logo').live('click', function() {
    alert('Work!');
});

注意：

从jQuery 1.7开始，不推荐使用.live（）方法。

修改

我找到了一个使用JWPlayer的onReady事件的解决方案：

$(function() { jwplayer("container").onReady(function() { $('#container_logo').click(function() { alert('Works!'); }); }); });

您可以在this jsfiddle中看到它的实际效果但是，我建议您更新您的jQuery版本并使用jQuery.on

Answer 2

首先，我建议您更新jQuery版本或使用jQuery noConflict。

然后，您需要使用包装器div包围您的图像，并使用.on()委派点击事件。

<强> HTML：

<div id="myWrapper">
    <img class="jwlogo" id="container_logo" src="..." />
</div>

<强> jQuery的：

$(document).ready(function() {
    $("#myWrapper").on("click", "#container_logo", function() {
        alert("Work!");
    });
});

Answer 3

实际上，右上角链接对我有用。

但是，请尝试：

$(document).on('click', '#container_logo', function(){  
    alert("hello"); 
});

如果元素被注入，那就可以了。

由于您使用的是旧版本的jQuery（1.3.1），因此必须使用.live()，如下所示：

$(document).live('click', '#container_logo', function(){  
    alert("hello"); 
});

另请注意，您可以将包装器绑定到注入代码的DOM元素：

$('#container').on('click', '#container_logo', function(){  
    alert("hello"); 
});

jQuery单击事件不会触发

3 个答案: