Passing variable to ON method (in jquery)

Question

I'm trying to pass a variable(present in global scope) to a function(present in on method). I'm passing a data object to the on but it's not working. It's working if i take variable inside the function.

Here's the code:

var firstName = $("#firstName").val();
$("#firstName").on("blur keyup paste", {firstName: firstName}, function(){
    //access firstName
})

Also, what is the best way of using on method. Should i use it like i have used above or should i use it like this?

var firstName = $("#firstName").val();
$(document).on("blur keyup paste", "#firstName", {firstName: firstName}, function(){
    //access firstName
})

Answer 1

As the event is being raised on the element which has the value you're trying to retrieve you can use the this reference to get at it:

$("#firstName").on("blur keyup paste", function(){
    var firstname = this.value; // or $(this).val();
});

With regard to the usage of on , your first example is to be used when the element you're attaching the event to exists in the DOM. The second method is for when the element does not yet exist, but may do in the future. You should use the nearest static parent element for the primary selector though, not document .