jquery: $(this) question

Question

i want to call a function when i have a textfield focused and then unfocus it (whether i press TAB or click elsewhere with the mouse) and i used this code:

 $("#settings_view #my_profile_div input").focus(function() {
        $(this).blur(function() {
            change_my_profile();
        });
    });

when i first run it (have a field focused then unfocus it) it runs one time as expected. but the sencond time it calls the function change_my_profile twice. the 3rd time it ran 3 times and so on.

what is the problem here and how do i solve it (i tried with 'throw' after change_my_profile and then it only ran one time, but i want to locate the problem anyway).

Answer 1

You need to remove the event handler after successful execution. Otherwise, you are stacking handler upon handler and they all get triggered. I think in JQuery that is done using unbind()

Answer 2

The .focus() and .blur() functions assign handlers to the 'focus' and 'blur' events repsectively. So every time the user focuses the textbox, your code is adding a new event handler to the 'blur' event. What you want is:

$("#settings_view #my_profile_div input").blur(change_my_profile);

Answer 3

Your code is asking jQuery to add (append) an onBlur event handler to an input field every time the user enters the field. So, your same event handler function gets appended over and over again. Are you simply trying to trigger a function to run when the user moves out of a field? If that is the case, you can simply use .blur to attach the onBlur handler once.

Answer 4

it is binding a blur event every time a focus event is initiated, that's why you are getting multiple executions

try

$(this).bind("blur",function(){
  change_my_profile(this);
})

and then in your change_my_profile function do the following

function change_my_profile(el){
  $(el).unbind("blur");
  //rest of the change_my_profile code goes here
}