为什么焦点事件不能正常工作？

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?

Answer 1

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)