Question

我有一个ID为“open”的HTML按钮。我已经添加了一个jQuery .click()绑定到HTML按钮，该按钮由ID选择。在.click()绑定中，我将“打开”的ID更改为“关闭”。但是，即使ID已更改为“关闭”，随后对“打开”按钮的单击仍然会触发。代码如下：

的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

$('#open').click(function() {
    console.log("clicked");
    $(this).attr('id', 'close');
});

https://jsfiddle.net/iHexBot/28tj1ywg/

我期待/希望只看一次控制台日志“点击”。但是，即使HTML元素ID不再“打开”，它也会在每次单击按钮时记录“单击”。有人可以向我解释为什么会发生这种情况，如果可能的话，如何解决这个问题？

Answer 1

如果您只想触发一次我会尝试：

$('#open').one("click", function() {
    console.log("clicked");
    $(this).attr('id', 'close');
});

但是如果你要创建一个'切换'按钮，我不会这样做。我会根据是否应该打开或关闭来创建一个不同的事件，如此处的其他答案所示。

Answer 2

您可以将事件绑定到文档而不是像

这样的元素

$(document).on('click', '#open', function() {
    console.log('this will only be displayed as long as id is "open"');
});

Answer 3

请改用此脚本：

$('#open').bind('click', function() {
    console.log("clicked");
    $(this).attr('id', 'close').unbind('click');
});

Answer 4

以下是在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/

Answer 5

为此目的，你应该＆＃34;应该＆＃34;使用ONE（）而不是取消绑定。为了证明这一点，我已经编辑了你原来的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：
https://jsfiddle.net/28tj1ywg/4/

Answer 6

jQuery将在浏览器加载时绑定.click()事件，而不是在每次单击后重新绑定它。

您希望.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>

.unbind() | jQuery

Answer 7

原因是在执行事件处理程序时，其上下文（即“this”对象）与定义上下文不同。另请参阅How do I pass the this context into an event handler?

jQuery .click（）在不存在的html元素上触发事件

7 个答案: