Using "this", When Function And Selector Are Not Together

With this example 1 $('#my_div').on('click', function () { alert( $(this).attr('id') ) }); we obtain correct result, but if I use this: example 2 function thisId () { aler

Solution 1:

For jQuery to pass the element reference to the function you must provide the function as a reference. Try this:

$("#my_div").on("click", thisId);

Update for @bot

function thisId (event) {
    alert( $(this).attr("id") )
    alert(event.type);
}

$("#my_div").on("click", thisId);

Solution 2:

@RoryMcCrossan's answer is the correct one, here's why: JS determines what this references ad hoc, that is: when the function is called, it looks at the call-context:

myObject.property = function(){console.log(this)}
myObject.property();
  /\          ||
  ||who called |
  |_____________

If the function wasn't called as a method of an obeject, like you did with thisId, JS -like it always does- falls back to the global object, and this will point to window. You can determine the calling context programmatically, with functionName.call(context) and functionName.apply(context,[arguments]);, which is what jQuery does behind the scenes:

$.fn.on(evt,callback)//simplified
{//jQ sets up its own event handler that looks like this://here, this point to $("#my_div") in your case, so:var jQhandler = function(e)
    {
        callback.apply(this,[e]);//passes the event as an argument
    };
    this.addEventListener(evt,jQhandler,false);//<-- passes its handler by reference
}

So you can do either this use apply, which -in your case- requires yet another anon. function object to be created, or pass the function directly to jQuery as being the callback. The latter being far more efficient: less verbose and less function objects required.

This is, in short, why @RoryMcCrossan is correct, and why some consider JS to be the worlds most misunderstood language: the bulk of ppl using it don't really know about how JS determines the context.

---

Just as a side-note: ECMA5 allows you to bind a function to a context, using the .bind method, but that would take us to far off-topic...