jQuery .click（）在不存在的html元素上触发事件
[英]jQuery .click() trigger event on non-existent html element
问题描述
I have an HTML button with an ID of "open". 
我有一个ID为“open”的HTML按钮。 I have added a jQuery .click() binding to the HTML button which is selected by ID. 我已经添加了一个jQuery .click()绑定到由ID选择的HTML按钮。 In the .click() binding I change the ID of "open" to "close". 在.click()绑定中，我将“open”的ID更改为“close”。 However, subsequent clicks on the "open" button are still firing even though the ID has been changed to "close". 但是，即使ID已更改为“关闭”，随后对“打开”按钮的单击仍然会触发。 The code is as follows: 代码如下：
index.html 的index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="open">Open</button>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
index.js index.js
$('#open').click(function() {
console.log("clicked");
$(this).attr('id', 'close');
});
https://jsfiddle.net/iHexBot/28tj1ywg/ https://jsfiddle.net/iHexBot/28tj1ywg/
I was expecting / hoping to see the console log "clicked" only one time. 我期待/希望只看一次控制台日志“点击”。 However, it logs "clicked" every time the button is clicked even though the HTML elements ID is no longer "open". 但是，即使HTML元素ID不再“打开”，它也会在每次单击按钮时记录“单击”。 Could someone please explain to me why this happens and if possible, how to fix this? 有人可以向我解释为什么会发生这种情况，如果可能的话，如何解决这个问题？
7 个解决方案
解决方案1
2 2015-11-02 15:08:48
If you only want to trigger once I would try this: 如果您只想触发一次，我会尝试这样做：
$('#open').one("click", function() {
console.log("clicked");
$(this).attr('id', 'close');
});
but if you are creating a 'toggle' button I wouldn't do it this way. 但是如果你要创建一个“切换”按钮，我不会这样做。 I would create one event that will act differently depending on whether it should be opening or closing, as other answer here suggest. 我会根据它是应该打开还是关闭来创建一个不同的事件，正如其他答案所示。
解决方案2
2 2015-11-02 15:16:05
You can bind the event to document instead of the element like so 您可以将事件绑定到文档而不是像这样的元素
$(document).on('click', '#open', function() {
console.log('this will only be displayed as long as id is "open"');
});
解决方案3
1 2015-11-02 15:10:24
Use this script instead: 请改用此脚本：
$('#open').bind('click', function() {
console.log("clicked");
$(this).attr('id', 'close').unbind('click');
});
解决方案4
1 2015-11-02 15:14:07
Here is the code to toggle between open and close 这是在open和close之间切换的代码
<button class="toggleButton" data-option="open">Open</button>
$(document).on('click','.toggleButton',function() {
if($(this).attr('data-option') == 'open') {
console.log('open');
// do something if "open" clicked;
$(this).text('Close');
$(this).attr('data-option','close');
}else{
console.log('close');
// do something if "close" clicked;
$(this).text('Open');
$(this).attr('data-option','open');
}
});
jsfiddle - https://jsfiddle.net/ygf1327m/ jsfiddle - https://jsfiddle.net/ygf1327m/
解决方案5
1 2015-11-02 18:27:45
For this purpose you "should" use ONE() rather than to unbind. 为此，你“应该”使用ONE（）而不是取消绑定。 Just to demonstrate this I have edited your original JSFIDDLE. 为了证明这一点，我已经编辑了你原来的JSFIDDLE。
jQuery(document).ready(function ($)
{
//the element to evaluate
var current_id= $("button#open");
alert("The ID of the button is: " + current_id.attr("id") );
current_id.one("click", function () {
//now once we click the button we have
current_id.attr('id', 'close');
alert("Now the ID is: " + current_id.attr('id') + " so we are changing it\'s text too... " );
//reflect the change
current_id.text("Close");
});
});
JSFIDDLE: 的jsfiddle：
https://jsfiddle.net/28tj1ywg/4/ https://jsfiddle.net/28tj1ywg/4/
解决方案6
0 已采纳 2015-11-02 15:08:10
jQuery will bind a .click() event on the browser load instead of re-binding it after each click. jQuery将在浏览器加载时绑定.click()事件，而不是在每次单击后重新绑定它。
You're going to want to .unbind() this event which should sort your issue out. 你会想要.unbind()这个事件应该排除你的问题。
$('#open').click(function() { console.log("clicked"); $(this).attr('id', 'close'); $(this).unbind(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="open">Open</button>
解决方案7
0 2015-11-02 15:11:29
The reason is that while executing the event handler its context (ie 'this' object) is different to the defining context. 原因是在执行事件处理程序时，其上下文（即“this”对象）与定义上下文不同。 See also How do I pass the this context into an event handler? 另请参见如何将此上下文传递给事件处理程序？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.