Javascript , event handler is always called, even if the event is not raised

i have the following code which extends the JQuery and adds a method to the JQuery:

$.fn.attachWithMessage = function () {
  $(this).focusin(showMessage());
}

function showMessage() {
    alert('hi');
}

so I can use that code as follows :

<input type="text" name="name" id="textbox" />
$(document).ready(function () {
   $("#textbox").attachWithMessage ();
});

when I load the page for the first time, a message box shows up开发者_如何学运维 with ('hi') message.

even if I didn't click in the text box.

I also tried the click event, and the message still shows automatically.

any ideas ??

---

The issue here is that when you pass showMessage() as a parameter to focusin, the function showMessage is executed and the return value is passed to focusin.

Instead you need to pass a reference to the function (without the paranthesis).

Use the following code to extend:

$.fn.attachWithMessage = function () {   
  $(this).focusin(showMessage); 
} 

Working example@ http://jsfiddle.net/eXEP5/

EDIT: If you want to pass a parameter to showMessage then try this:

$.fn.attachWithMessage = function () {   
  var param1 = "Some Param";
  $(this).focusin(function(){
     showMessage(param1); //Make sure showMessage is modified accordingly for the parameters.
  }); 
} 

---

just remove the parenthesis

$(this).focusin(showMessage());

should be

$(this).focusin(showMessage);

Hope this helps