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?

@gibberish is correct. `#container_logo` doesn't exist in the page when the ready event is called, so that selector doesn't work and no click handler is attached. — Mordred, Mar 13 '14 at 20:11
Is there a specific reason you are using an outdated jQuery version? — martynas, Mar 13 '14 at 20:22
@Damien Black hm...Are you using Mac? Because i tried Firefox, IE, Chrome & Window safari on my Windows 8.1 here. — Love, Mar 14 '14 at 15:04

Mariano Córdoba · Accepted Answer · 2014-03-14T15:42:57.427

3

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

edited Mar 14 '14 at 15:42

answered Mar 13 '14 at 20:11

Mariano Córdoba

1,097
1
13
29

`.live()` has been deprecated, use `.on()`. OTOH, looking at OP's source I now realize the OP is using an outdated version of jQuery (1.3.1) so you may be right ! `**Yes, .on entered jQuery-land as of version 1.7, so .live is the right choice here.**` – cssyphus Mar 13 '14 at 20:12
live() is deprecated. You should use `on` like @gibberish said – Collin Henderson Mar 13 '14 at 20:13
However, I believe .live/.on should bind to the element above that one: `$('#container')`, no? – cssyphus Mar 13 '14 at 20:13
@MarianoCordoba I tried your suggestion by still no luck: http://vt-test.co.nf/MarianoCordoba/ Any advice? – Love Mar 14 '14 at 15:06
@MarianoCordoba Gosh...onReady! You're so brilliant! How stupid i am! :( Thanks a lot! It's worked! :) – Love Mar 14 '14 at 17:30

score 3 · Answer 2 · answered Mar 13 '14 at 20:16

3

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

answered Mar 13 '14 at 20:16

martynas

12,120
3
55
60

Have you checked OP's jQuery version? There is no `.on` in version 1.3.1 – cssyphus Mar 13 '14 at 20:19
1

And a good answer it is. +1 (which will need to happen in 2.5 hours as I'm out of votes for now...) – cssyphus Mar 13 '14 at 20:21
@martynas I tried your suggestion but no luck: http://jsfiddle.net/46BrE/2/ Any advice? – Love Mar 14 '14 at 15:14
I will have a look tomorrow - I have a deadline for today – martynas Mar 14 '14 at 15:17
I see you found a solution. Good luck! :) – martynas Mar 15 '14 at 08:35

cssyphus · Answer 3 · 2014-03-13T20:21:21.440

2

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

edited Mar 13 '14 at 20:21

answered Mar 13 '14 at 20:10

cssyphus

37,875
18
96
111

on is throwing error Uncaught TypeError: Object # – Hitesh Mar 14 '14 at 07:45
@gibberish Weird...Are you using Mac? Because i tried Firefox, IE, Chrome & Window safari on my Windows 8.1 here. – Love Mar 14 '14 at 15:07
@gibberish I tried your suggestions by still no luck: 1st example: http://jsfiddle.net/46BrE/ 2nd example: http://vt-test.co.nf/gibberish and 3rd example: http://jsfiddle.net/46BrE/2/ Any advice? – Love Mar 14 '14 at 15:09
@Love I tried it again just now. When click the upper-right corner, I am redirected to this site: http://www.jwplayer.com/learn-more/. When click on center button, the video plays. I will review your jsFiddles and post results. – cssyphus Mar 14 '14 at 16:15
@Love When click on 1st example, logo in upper right corner it again hyperlinked successfully to http://www.jwplayer.com/learn-more/. In your 2nd example, clicking the JWPLAYER example works, but the blender logo at bottom does not (!). In the 3rd example, the upper-right corner logo also takes me to the learn-more website. I am using Windows 7 with the current version of Google Chrome. – cssyphus Mar 14 '14 at 16:17
@gibberish oh...no..i think it's misunderstanding here. the redirect to URL jwplayer.com/learn-more is a default function of the logo. What i'm testing the jQuery function is alert('work'), just same as the test logo below the player. – Love Mar 14 '14 at 17:24
@Love I now understand what you mean. Yes, that's a tough one. You are trying to override the javascript embedded with the injected player. I tried a number of things myself, but no success. I suggest asking another question where you specifically ask how to override the javascript injected with the player. Sorry that I cannot be of more assistance. – cssyphus Mar 14 '14 at 20:57
@gibberish Thanks gibberish, it's solved now. Thanks a lot for your help. :) – Love Mar 14 '14 at 22:54
@Love How did you solve it? Very curious... thought I tried everything. If possible, please post an answer with the solution and accept it as the answer for this question. – cssyphus Mar 14 '14 at 23:30

jQuery click event not trigger

3 Answers3