All geek questions in one place

Why is this jQuery event fired twice?

When you run this code and press input2 , it will get focus, and the .result div will output "f2" once. But when you press input1 , the script will allow input2 to get focus, and the .result div will output "f2" twice, why?

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>blank</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".input1").click(function(){$(".input2").focus();}); $(".input2").focus(function(){$(".result").html($(".result").html()+"f2, ");}); }); </script> </head> <body> <p> <input class="input1" value="click me to set the input2 focus" /> <input class="input2" value="input2" /> <div class="result"></div> </p> </body> </html>
+4
source share
3 answers

This is a known jquery bug:

http://bugs.jquery.com/ticket/6705

IE incorrectly calls focus twice.

+7
source

Update: Fixed ... switched to focusin from focus, removing the lack of focus in input2 error.

This seems to be a problem only with Internet Explorer. Add a preventDefault call to fix the dual focus problem. Here jsFiddle it works for me .

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>blank</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".input1").click(function(){$(".input2").focus();}); $(".input2").focusin(function(e) { e.preventDefault(); $(".result").html($(".result").html()+"f2, "); }); </script> </head> <body> <p> <input class="input1" value="click me to set the input2 focus" /> <input class="input2" value="input2" /> <div class="result"></div> </p> </body> </html>
+1
source

Although it does not seem to replicate, I saw that such a problem occurs when multiple events are bound to a control. This can happen when you end up binding the focus () event twice. It might be worth exploring this and clearing existing bindings before the code.

0
source

Source: https://habr.com/ru/post/1387201/

More articles:


All Articles