jQuery点击事件未触发

Question

jQuery点击事件未触发

4

我是最新版本6.8的jwplayer用户。我试图使用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。需要帮助吗？请留言。

- Love

@gibberish 是正确的。当 ready 事件被调用时，页面中不存在 #container_logo，因此该选择器无法工作，也没有附加任何点击处理程序。 - Mordred

你使用过时的jQuery版本有特定的原因吗？ - martynas

你是否拥有授权版本？ - Hitesh

@Damien Black 嗯...你是用Mac吗？因为我在这里尝试了Firefox、IE、Chrome和Windows Safari，都是在我的Windows 8.1上。 - Love

3个回答

3

首先，我建议您更新您的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!");
    });
});

- martynas

你有检查过 OP 的 jQuery 版本吗？1.3.1 版本中没有 .on。 - cssyphus

1

这是一个很好的答案。+1（需要在2.5小时后进行，因为我现在没有投票权...） - cssyphus

@martynas 我尝试了你的建议，但没有成功：http://jsfiddle.net/46BrE/2/ 有什么建议吗？ - Love

明天我会看一下 - 今天我有截止日期 - martynas

@martynas 没问题。非常感谢。 - Love

我看到你找到了解决方案。祝你好运！ :) - martynas

2

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

不过，可以尝试以下方法：

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

- cssyphus

出现错误Uncaught TypeError：对象＃<Object>没有方法'on'。 - Hitesh

@gibberish 我尝试了你的建议，但仍然没有成功：第一个例子：http://jsfiddle.net/46BrE/；第二个例子：http://vt-test.co.nf/gibberish；第三个例子：http://jsfiddle.net/46BrE/2/。有什么建议吗？ - Love

@Love 当点击第一个示例时，右上角的标志再次成功超链接到http://www.jwplayer.com/learn-more/。在您的第二个示例中，单击JWPLAYER示例有效，但底部的blender标志不起作用！在第三个示例中，右上角的标志也将我带到了learn-more网站。我正在使用Windows 7和当前版本的Google Chrome。 - cssyphus

@gibberish 哦...不...我觉得这里有误解。重定向到 jwplayer.com/learn-more 的 URL 是标志的默认功能。我正在测试的 jQuery 函数是 alert('work')，与播放器下面的测试标志相同。 - Love

@Love 我现在明白你的意思了。是的，这个很难。你正在尝试覆盖注入播放器的嵌入式JavaScript。我自己也尝试了许多方法，但都没有成功。我建议你提出另一个问题，具体询问如何覆盖与播放器注入的JavaScript。很抱歉我不能提供更多帮助。 - cssyphus

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mariano Córdoba · Accepted Answer

由于您正在使用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!');
        });
    });
});

你可以在这个 jsfiddle中看到它的运作过程。然而，我建议你更新jQuery版本并使用jQuery.on。