jquery tools :how to get the id

Question

<a id="cp-login" href="javascript:;" rel="#dialog" show="#login">登入</a> 

$("a[id^=cp-][rel]").overlay(
  {top: 120,mask: {color: '#67B300',loadSpeed: 200,opacity: 0.2},
    closeOnClick: false, 
    onBeforeLoad: function() { alert($(this).attr("id") )}

});

alert($(this).attr("id") is undefined

thinks a lot.

Answer 1

This short story: In case you are trying to access the element that triggered the overlay use this instead:

this.getTrigger().attr('id')

The longer story: in a DOM event handler "this" refers to the element that triggered the event. onBeforeLoad though is NOT a DOM event handler. It is simply a function that jQuery Tools will execute before the overlay is fetched. Javascript allows the developer to specify the meaning of "this" when a function is executed. So the jQuery Tools developers either made it point to something relevant or didn't bother (in which case it would be an alias for the global "window" object). Either way, the documentation (http://flowplayer.org/tools/demos/overlay/external.html) describes how to access both the trigger and the overlay element.

As a rule of thumb, don't use "this" in Javascript unless you know exactly what it means in the current context because it is unlike "this" in any other language.