javascript - Function run multiple times on textfield focus - Stack Overflow

admin管理员组

文章数量:1401589

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. However, the second time it calls the function change_my_profile twice. The third 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).

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. However, the second time it calls the function change_my_profile twice. The third 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).

• javascript
• jquery

Share Improve this question Follow edited Aug 13, 2011 at 11:01 staticbeast 2,09733 gold badges2222 silver badges2424 bronze badges asked Dec 28, 2009 at 3:29 ajsieajsie 79.9k110110 gold badges284284 silver badges387387 bronze badges 1

• 2 Just a side note, you can just do $(this).blur(change_my_profile) rather than making that anonymous function that only calls change_my_profile();. – TM. Commented Dec 28, 2009 at 3:41

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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
}

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);

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()

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.

本文标签： javascriptFunction run multiple times on textfield focusStack Overflow