Solution to jquery trigger function being executed twice_jquery
The example in this article describes the solution to the problem of executing the jquery trigger function twice. Share it with everyone for your reference, the details are as follows:
1. The questions are as follows:
has the following code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px; }
p {width:200px;background:#888;color:white;height:16px;}
</style>
<script src="jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#old').bind("click", function(){
$("input").trigger("focus");
});
$('#new').bind("click", function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("body").append("<p>focus.</p>");
})
});
</script>
</head>
<body>
<button id="old">trigger</button>
<button id="new">triggerHandler</button>
<input />
</body>
</html>
Function here:
$('#old').bind("click", function(){
$("input").trigger("focus");
});
Only triggered once in Firefox, that is, a focus is output;
But it is triggered twice in IE, that is, two focuses are output at the same time;
2. Solution:
First analyze trigger and triggerHandler. Using triggerHandler will not trigger the browser's default event and will not cause event bubbling (see the jQuery documentation for other differences). A ticket about this bug. commit on this issue. jQuery itself implements an event object to resolve differences between browsers. However, due to the existence of non-standard events such as mouseenter/mouseleave, jQuery has introduced a special event subsystem to allow native events to return to the event queue of simulated events. However, this system cannot solve all problems. When using trigger.focus, Under IE, the callback will be executed twice incorrectly.
triggerHandler is a solution to this problem with triggers. But when using triggerHandler, you will find that input has no cursor focus effect.
Initial solution:
In addition to using triggerHandler, another method is to add:
to the focus binding eventevent.preventDefault()
But you find that this does not meet our expectations, because the focus event callback is executed, but there is no focus effect.
Final solution:
Since it is encapsulated by jQuery, we can just use native events. Looking at the demo, the left side is triggered by native events, and the right side uses triggerHandler.
$('input')[0].focus();
Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery drag effects and skills summary", "jQuery extension skills summary", "JQuery common classic special effects summary", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage Summary》
I hope this article will be helpful to everyone in jQuery programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1358
52
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to use XPath to search from a specified DOM node in JavaScript?
Apr 04, 2025 pm 11:15 PM
Detailed explanation of XPath search method under DOM nodes In JavaScript, we often need to find specific nodes from the DOM tree based on XPath expressions. If you need to...
Why are the inline-block elements misaligned? How to solve this problem?
Apr 04, 2025 pm 10:39 PM
Regarding the reasons and solutions for misaligned display of inline-block elements. When writing web page layout, we often encounter some seemingly strange display problems. Compare...
How to obtain real-time application and viewer data on the 58.com work page?
Apr 05, 2025 am 08:06 AM
How to obtain dynamic data of 58.com work page while crawling? When crawling a work page of 58.com using crawler tools, you may encounter this...
How to select a child element with the first class name item through CSS?
Apr 05, 2025 pm 11:24 PM
When the number of elements is not fixed, how to select the first child element of the specified class name through CSS. When processing HTML structure, you often encounter different elements...
What is the reason for encoding exceptions when using the request library to get HTML text in Node.js? How to solve it?
Apr 05, 2025 am 07:03 AM
The reason and solution for coding exceptions when using the request library to obtain HTML text content in the Node.js environment. During the development process of using Node.js, it is often necessary to...
Vue2 project online iframe white screen: How to troubleshoot and solve it?
Apr 05, 2025 am 06:21 AM
Troubleshooting and solving the online white screen of iframe in Vue2 project. In the development of Vue2 project, we often use iframes to embed other web content. However, the item...
iconfont icon displays abnormal intermittently? How to troubleshoot and solve coding problems
Apr 05, 2025 am 07:54 AM
iconfont...
