jquery onclick event not working

Question

Here is my code:

    jQuery('a.students').on('click',function(e){
         alert(1);
    });

I create my HTML using jQuery. The preceding code is placed underneath my html creation. Here is my HTML:

    <li class="online new on "><a class="students">
     <span>Some name</span></a>
     <span style="background:green" class="msgcount"></span>
   </li>
    <li class="online new on "><a class="students">
     <span>Some name</span></a>
     <span style="background:green" class="msgcount"></span>
   </li>

I tried moving the students class to the li element also. I updated my javascript to:

    jQuery('li.students').on('click',function(e){
         alert(1);
    });

Nothing seems to be working.

Is the HTML added AFTER your script runs? `console.log(jQuery('a.students').length);` — epascarello, Jun 18 '14 at 19:02
Could you provide the code that creates the HTML? Preferably create a fiddle where it doesn't work. — Moriarty, Jun 18 '14 at 19:21
See @Moriarty's comment. I made a [quick fiddle](http://jsfiddle.net/Cm58g/1/) which creates html, then separately adds click events to them and it seems to work fine. It may be possible that your objects aren't being created when you think they are, and seeing the creation code would help rule that out. — user3507600, Jun 18 '14 at 19:32

score 3 · Accepted Answer · answered Jun 18 '14 at 19:02

3

$('body').on('click', 'a.students', function(){
  alert(1);
})

As you said you are creating HTML using jQuery, there is problem of event binding. Binding with body will work also fr HTML created dynamically.

answered Jun 18 '14 at 19:02

Nilambar Sharma

1,732
6
18
23

score 0 · Answer 2 · answered Jun 18 '14 at 19:04

0

Slightly tweaked your JQuery.

JSFiddle Demo

$('.students').click(function(){
     alert(1);
 });

Let me know if this helps.

answered Jun 18 '14 at 19:04

Austin

3,010
23
62
97

1

Can someone explain why this was downvoted? It seems like a completely reasonable answer to me... – user3507600 Jun 18 '14 at 19:11
No clue, it works perfectly well too. – Austin Jun 18 '14 at 19:13
1

The answer is EXACTLY the same as `.on()` That is why I down voted. Put the OPs code in there and watch it work also. `$('a.students').click(xxx)` and `$('a.students').on("click",xxx)` are no different. jQuery 101. – epascarello Jun 18 '14 at 19:17
@epascarello, are you sure about that? [This topic](http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click) suggests otherwise. – user3507600 Jun 18 '14 at 19:34
1

@user3507600 Read the documentation for http://api.jquery.com/click/ First line says: *"this method is a shortcut for `.on( "click", handler )`"*. What the link you posted is talking about is event delegation and adding one click handler to the page instead of multiple to each element. – epascarello Jun 18 '14 at 19:42
@epascarello They are still different... If they were EXACTLY the same, then everything you can do with `.on()` you could do with `.click()` which is simply not true (given that you can't specify selectors). `.click()` is a shortcut for `.on("click", handler)` not for `.on()`. – user3507600 Jun 18 '14 at 19:48
WOWzers, so you are saying the documentation on jQuery's site is wrong? What the OP wrote and what answer is, there is no difference. If the answer was written like Nilambar's, there would be a difference. – epascarello Jun 18 '14 at 20:08
@user3507600 Look at the code: `console.log($.fn.click.toString());` Looking at the unminified source "b" is the string "click" – epascarello Jun 18 '14 at 20:14
@epascarello quite the opposite. I'm saying the documentation is right and that you're reading it wrong. `.click()` maps to `.on()` where the event is `'click'` and there is no `selector` provided. Either way it's a moot point as you've closed the thread. – user3507600 Jun 18 '14 at 22:08

jquery onclick event not working

2 Answers2