jQuery .on() not working, while .live() does fine

Question

I have this:

$("#socialsLogin").on("click", function() {
    var login = $("#socialsLoginField").val();
    var passwd = $("#socialsPasswordField").val();
    SocialsStart(login, password);
});

And this:

<a href="javascript:void(0)" id="socialsLogin" class="button">Disconnected</a>

And my click event is not firing up - what am I doing wrong? If I change .on() with .live(), everything works fine. But I don't want to use .live() since it is deprecated (and yes, I am using jquery 1.9)

Edit: It is not a duplicate. When I use $(document).on("click", "#socialsLogin", function() { it works everywhere on the page - I might click on an image and it fires up. Definitely not as intended. And $(document.body).on("click", "#socialsLogin", function() { doesn't work at all for me.

Edit2: Here's my fiddle: http://jsfiddle.net/JeDLW/1/

are you wrapping that code in a `$(document).ready(function() { ....` ? — Sam Dufel, Apr 05 '13 at 19:55
@SamDufel: What? No. I am not so good with javascript so I even don't know what your code does. :) — ojek, Apr 05 '13 at 19:56
@ojek - most likely, your javascript is running before the page is ready to have events bound to it. Read this article - http://learn.jquery.com/using-jquery-core/document-ready/ — Sam Dufel, Apr 05 '13 at 19:59
@ojek start by removing `href="javascript:void(0)"` from your mark-up (you shouldn't add JS like this.. instead, use selectors in your script to target the desired elements), then have a look at the answers below.. — Tom, Apr 05 '13 at 20:00
@ojek Regarding your edit, you don't seem to get how `on` works. You should read my answer or try the code we suggest. — Denys Séguret, Apr 05 '13 at 20:00

Denys Séguret · Accepted Answer · 2013-04-05T20:15:55.020

2

To replace live, use on like this :

 $(document.body).on("click", "#socialsLogin", function() {

The jQuery set receives the event then delegates it to elements matching the selector given as argument. This means that contrary to when using live, the jQuery set elements must exist when you execute the code.

Note that this binding code should be executed in a ready callback :

$(function() {
     $(document.body).on("click", "#socialsLogin", function() {
         ...
     });
});

EDIT :

As I suspected, your fiddle shows that you use more than one element with the id "socialLogin". That's the problem. Change the id of your fieldset.

edited Apr 05 '13 at 20:15

answered Apr 05 '13 at 19:52

Denys Séguret

372,613
87
782
758

Of course, binding it to `document.body` completely circumvents the advantage of using `.on()` over `.live()` – Sam Dufel Apr 05 '13 at 19:54
@SamDufel When the selector just points at the id, it doesn't matter. – Denys Séguret Apr 05 '13 at 19:55
@SamDufel you lose some of the advantage in terms of the delegation targets, but you still get the advantage of using a non-deprecated method – ernie Apr 05 '13 at 19:55
@SamDufel ...except that `.live()` is deprecated while `.on()` is not – Tom Apr 05 '13 at 19:55
@dystroy: Okay, I fired it up in a ready callback, and still, it works, but not when I click on an anchor tag, but it works on every click i make. Why? It's like the selector was whole document? – ojek Apr 05 '13 at 20:06
There might be a problem with your HTML... Are you sure you didn't get this id to another element ? Can you build a [fiddle](http://jsbin.com) ? – Denys Séguret Apr 05 '13 at 20:08
@dystroy: http://jsfiddle.net/JeDLW/1/ – ojek Apr 05 '13 at 20:12
@ojek I changed your fiddle to import jQuery and use on instead of live : http://jsfiddle.net/dmu76/ . You see clicking the document doesn't launch the alert, only clicking the fieldset. EDIT : your problem is that your fieldset has the same id"socialLogin". – Denys Séguret Apr 05 '13 at 20:14
Well, that .live() was there by mistake, previously i had .on(). Anyways some magic happened and the thing is working, so thank you. :) – ojek Apr 05 '13 at 20:17
@dystroy Actually, it's not. The `fieldset` has the id `socialLogin` while the selector is targeting `socialsLogin` (notice the 's'), which is the anchor tag – Tom Apr 05 '13 at 20:21
1

@ojek http://jsfiddle.net/JeDLW/2/ This'll work – Tom Apr 05 '13 at 20:23

palaѕн · Answer 2 · 2013-04-05T20:00:50.357

2

Try like this:

$(document).on("click", "#socialsLogin", function() {
    var login = $("#socialsLoginField").val();
    var passwd = $("#socialsPasswordField").val();
    SocialsStart(login, password);
});

Or you can simply use this:

$("#socialsLogin").click(function () {
    var login = $("#socialsLoginField").val();
    var passwd = $("#socialsPasswordField").val();
    SocialsStart(login, password);
});

edited Apr 05 '13 at 20:00

answered Apr 05 '13 at 19:52

palaѕн

72,112
17
116
136

Yeah this works, but not as intended, i might click on everything and it fires up. :D – ojek Apr 05 '13 at 19:55
Is `socialsLogin` element dynamically created? – palaѕн Apr 05 '13 at 19:58
No, but it is being hidden and showed up. – ojek Apr 05 '13 at 19:59
Please try the next code then... – palaѕн Apr 05 '13 at 20:01
Yes, .click() works fine just as .live() does. But I am curious why my .on is not working – ojek Apr 05 '13 at 20:02
@ojek please add the important mark-up and JS code to http://jsfiddle.net , then click "Save" and post the generated URL, and I'll have a look. Works for me, so there must be something wrong in your code... – Tom Apr 05 '13 at 20:10
@ojek http://jsfiddle.net/JeDLW/2/ – Tom Apr 05 '13 at 20:20

jQuery .on() not working, while .live() does fine

2 Answers2