jQuery click event not trigger

Question

I'm using jwplayer latest version 6.8. I try to use jQuery to call function when user clicked my logo in the player but it doesn't work.

This is the logo's image tag of the player in HTML:

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

This is the jQuery function:

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

This is the test page: http://vt-test.co.nf

Any help please?

Answer 1

Since you're using jQuery 1.3, try using jQuery.live like this:

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

Note:

As of jQuery 1.7, the .live() method is deprecated.

Edit

I found a solution using the onReady event of JWPlayer:

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

You can see it in action in this jsfiddle However, I suggest you to update your jQuery version and use jQuery.on

Answer 2

Firstly, i would recommend you to update your jQuery version or use jQuery noConflict.

Then, you would need to surround your image with a wrapper div and delegate the click event using .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

Actually, the upper right link worked for me.

However, try:

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

If the elements are injected, that will do the trick.

Since you are using an older version of jQuery (1.3.1), you must use .live(), like this:

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

Also note that you can bind the wrapper to the DOM element into which the code is injected:

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