jQuery not firing event on tag click

Question

I wonder why when I click on my "a" nothing happens. Here is the concerned part of my HTML doc:

<div class="itemu">
  <div class="played">
    <span>3D</span><br>
    <a id="1q1uSDi71Tl::::ypYqQXw" class="boutonlien" title="supprimer HOLA" href=""></a>
  </div>
  <div style="clear:both;"> </div>
</div>

and here my jQuery

$("a.boutonlien").click(function() {
    alert('ok');        
});

alert just for testing but nothing happens.

Probably because you're attaching your event handlers in a manner where the elements you're accessing are not accessible on the DOM yet. See: `onload`, `jQuery.ready()`. — Jared Farrish, Aug 04 '13 at 17:18
note: Are you sure using "1q1uSDi71Tl::::ypYqQXw" as `id` is a good idea? — MightyPork, Aug 04 '13 at 17:20
As a sidenote, an empty href will reload the page when clicked, and there's no preventDefault or return false in the click handler. — adeneo, Aug 04 '13 at 17:21
@MightyPork maybe not *good*, but *[valid](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html)* — Ian Clark, Aug 04 '13 at 17:21
Meh. If the id is programmatically generated and any reference to it is held in a variable, it's just as good as any. At least it doesn't accidentally clash with anything else. — JJJ, Aug 04 '13 at 17:22
I meant the colons. I'm not sure if id `#craft:hover` would work as expected. — MightyPork, Aug 04 '13 at 17:23
@MightyPork - [Sure.](http://stackoverflow.com/questions/5899881/jquery-selector-for-select-with-id1) — Jared Farrish, Aug 04 '13 at 17:24
well the id you see there is obfuscated that's why but i decode it later on the server side well maybe the empty href is the problem actually adeneo would you tell me more about how to go around this remove href attribute and fix css adding pointer: cursor ?? — Aimedollar Ponda Mali Kichimba, Aug 04 '13 at 17:36

score 0 · Answer 1 · answered Aug 04 '13 at 17:20

0

As Jared mentioned, firstly, make sure you wait for the document to fully load before you try to attach your event.

$(document).ready(function() {
    $("a.boutonlien").click(function() {
        alert('ok');        
    });
});

Given that, I've created a fiddle using your code, and it works fine. The only thing is that there's no text to click on, so I've added something arbitary ("hi").

answered Aug 04 '13 at 17:20

Ian Clark

9,237
4
32
49

class boutonlien has a background image i tried to ad '.' as text but it doesn't help – Aimedollar Ponda Mali Kichimba Aug 04 '13 at 17:31
@AimedollarPondaMaliKichimba Look in the [JavaScript error console](http://www.netmagazine.com/tutorials/javascript-debugging-beginners) and tell what errors you see there and which lines they point to. – JJJ Aug 04 '13 at 17:31
there is no error i've checked with firebug and the is just no error when i click on the link – Aimedollar Ponda Mali Kichimba Aug 04 '13 at 18:17

score 0 · Answer 2 · answered Aug 05 '13 at 15:35

well i dont know why and how but this is what worked finally for me to now i'm still trying to figure out why this works and not what i was doing before anyway ..

i think it's due to some conflict in jquery because i noticed some other simple javascript onclick event where performing in very wierd manner

HTML

<div id="item_to_delete" class="played"> <span>Dvd</span><br> <span id="hvMBviqCGP4xFKs16SBYsQ" class="boutonlien" title="supprimer JHKHJK"></span> </div>

JQuery

$( document ).on( 'click', '#item_to_delete span.boutonlien', function( ) { and here things i wanted to dot ;) });

jQuery not firing event on tag click

2 Answers2