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

this question has answer here:

• event handler not working on dynamic content [duplicate] 2 answers

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 click event not firing - doing wrong? if change .on() .live(), works fine. don't want use .live() since deprecated (and yes, using jquery 1.9)

edit: not duplicate. when use $(document).on("click", "#socialslogin", function() { works everywhere on page - might click on image , fires up. not intended. , $(document.body).on("click", "#socialslogin", function() { doesn't work @ me.

edit2: here's fiddle: http://jsfiddle.net/jedlw/1/

to replace live, use on :

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

the jquery set receives event delegates elements matching selector given argument. means contrary when using live, jquery set elements must exist when execute code.

note binding code should executed in ready callback :

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

edit :

as suspected, fiddle shows use more 1 element id "sociallogin". that's problem. change id of fieldset.