javascript - jQuery .click() 只工作一次

Question

我正在尝试制作一些在您单击它时会更改的文本，但如果您再次单击它会更改回来。它工作正常，一次。但如果我再试一次，什么也没有发生。

我的 HTML：

<div id="text">
    <p>TEXT1</p>
</div>

JavaScript/jQuery：

$(document).ready(function(){
    $("#text").click(function(){
        $(this).html("<p>TEXT2</p>").click(function(){
            $(this).html("<p>TEXT1</p>");
        });
        return false;
    });
});

示例： http: //mrkireko.github.io/jQueryExample/

Answer 1

这是因为在第一次单击之后，您现在分配了两个处理程序，

第一个仍然放置TEXT2到位，但第二个将其更改回来。

一种正确的解决方案是使用处理程序版本.toggle()：

$(document).ready(function(){
    $("#text").toggle(function(){
        $(this).html("<p>TEXT2</p>");
        return false;
    }, function(){
        $(this).html("<p>TEXT1</p>");
        return false;
    });
});

---

正如@KevinB 所指出的，此版本.toggle()已弃用。要进行自己的切换，您可以这样做：

$(document).ready(function() {
    $("#text").click(function(i){
        return function() {
            $(this).html(++i % 2 ? "<p>TEXT2</p>" : "<p>TEXT1</p>");
            return false;
        };
    }(0));
});

演示：http: //jsfiddle.net/NkGZj/

Answer 2

我建议改为：

$('#text p').click(function(){
    $(this).text(function(i,t){
        return $.trim(t) === 'text1' ? 'text2' : 'text1';
    });
});

JS 小提琴演示。

参考：

• click().
• jQuery.trim().
• text().

Answer 3

您将多个单击处理程序绑定到同一个元素，并且每次单击时它们都会执行。由于将文本更改为TEXT1最后执行的处理程序，这就是您最终得到的。

在此处查看console.log()输出：

http://jsfiddle.net/tcMx5/

在事件处理程序中绑定事件处理程序几乎从来都不是正确的做法。相反，有一个处理程序来检查当前状态并切换值。

Answer 4

这里有几个答案，有些会很好用。这是另一种选择，使用类：

<div id="text" class="state1">
  <p>TEXT1</p>
</div>

$(document).ready(function(){
  $("#text").click(function(){
    var $this = $(this);
    if ($this.hasClass('state1')) {
      $this.html('<p>TEXT2</p>');
    }
    else {
      $this.html('<p>TEXT1</p>');
    }
    $this.toggleClass('state1');
  });
});

我会更倾向于这个解决方案，因为它不依赖于元素中实际包含的内容。当然，除非您知道它永远不会改变并且您可以可靠地定位字符串。

Answer 5

你可以这样做：

$( "#text" ).toggle(function() {
  this.html("<p>text 2</p>");
}, function() {
    this.html("<p>text 1</p>");
});