Why focus event doesn't work correctly?

Question

Here is my code:

function removeWrongClass(el){
  el.removeClass('wrong');
}

$(".ask_q_title_input").on('focus', removeWrongClass($(this)));

.wrong{
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="ask_q_title_input wrong" type="text" />

Expected behavior is removing that red background color (which is because of .wrong class) from the input when you focus on the input. But it doesn't happen. What's wrong? And how can I fix it?

because it is working correctly, you just didn't give it a function to execute. — Kevin B, Feb 02 '17 at 21:24
@KevinB So? if I call it, then why `el.removeClass('wrong');` doesn't execute? — stack, Feb 02 '17 at 21:25
because it does execute. Look at your console. add a console.log to it. — Kevin B, Feb 02 '17 at 21:25
You call it immediately, not when the element gets focus. `.on()` needs to be passed a function, you're passing it the return value of a function call. — JJJ, Feb 02 '17 at 21:27
Not sure why we're beating around the bush with cryptic hints here, but the bottom line is that if you're trying to *pass* a function, it cannot include parameters. The `focus` event wants a function, but you're not giving it a function - by including parameters, you're passing the **result** of a function. You'd be best off using an anonymous function, like `.on("focus", function() { removeWrongClass($(this)) });` — Tyler Roper, Feb 02 '17 at 21:27
@Santi In reality, that function isn't just containing one line. And I need to call it for other cases. — stack, Feb 02 '17 at 21:29
I wouldn't suggest Santi's solution. Instead, you can do `.on('focus', removeWrongClass);` and then instead of having `removeWrongClass(el)` you just have `removeWrongClass()` and instead of using `el` you use `$(this)` as you would regularly. — Adjit, Feb 02 '17 at 21:29
@stack No, because `el` isn't an element when you call it. the way you are. — Kevin B, Feb 02 '17 at 21:30
What if he wants to manually call the function with a different element, other than `$(this)`? — Tyler Roper, Feb 02 '17 at 21:30
@stack I mean, despite whether its the best practice, I gave you a 100% working & re-usable answer in the comments above. Your response for why my comment *wouldn't* work doesn't exactly make sense to me. `$("element").on("focus", function() { //Put 1,000 lines of code here }):` — Tyler Roper, Feb 02 '17 at 21:33

Adjit · Accepted Answer · 2017-02-06T15:59:13.860

0

As others have said, you are calling the function, instead of passing it as the function to run.

function removeWrongClass(){
  $(this).removeClass('wrong');
}

function toggleWrongClass(){
  $(this).toggleClass('wrong');
}

$(".ask_q_title_input").on('focus', removeWrongClass);

$(".ask_q_title_input_toggle").on('focus focusout', toggleWrongClass);

.wrong{
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Turn off wrong on focus - <input class="ask_q_title_input wrong" type="text" /><br/>
Toggle wrong on focus in and out - <input class="ask_q_title_input_toggle wrong" type="text" />

If you would like to use removeWrongClass on another element you can call it as follows -

removeWrongClass.call(elementYouWantAsThis)

edited Feb 06 '17 at 15:59

answered Feb 03 '17 at 15:16

Adjit

10,134
12
53
98

In this case, I cannot pass a parameter. Right?! Because sometimes I need to affect on other element. – stack Feb 03 '17 at 18:24
@stack what other element would you need to change? Is it in relation to the input, because if so you can use dom traversal to change the other element as well. – Adjit Feb 06 '17 at 15:55

Why focus event doesn't work correctly?

1 Answers1