jQuery .click（）只能工作一次

我试图让一些文本在您点击时发生变化，但如果您再次单击它，则会发生变化。它工作正常，曾经。但是如果我再试一次，没有任何反应。jQuery .click（）只能工作一次

我的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/

来源

2013-10-08 MrKireko

不绑定两个点击事件，只需使用if语句将其更改为x（如果它是y），或者如果它是x，则y。 –

你真的想做什么。这不是正确的做法。 –

您需要创建委派的点击事件。 –

你多点击处理程序绑定到相同的元素，并且他们都执行每当你点击。由于将文本更改为TEXT1的处理程序最后执行，所以最终会执行此操作。

见console.log()输出这里：在事件处理程序

http://jsfiddle.net/tcMx5/

绑定的事件处理函数几乎都不是正确的事情。相反，有一个处理程序检查当前状态并切换值。

来源

2013-10-08 18:12:21

这是因为第一次点击之后，你现在有分配处理器，

第一个还是放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)); 
});

DEMO：http://jsfiddle.net/NkGZj/

来源

2013-10-08 18:12:33 user2736012

但请注意，使用.toggle作为事件绑定已被弃用，并且之后从jquery内核中删除。 –

参考：['.toggle（）'event]（http://api.jquery.com/toggle-event/）。 –

@KevinB：谢谢，不知道。 – user2736012

我建议改为：

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

JS Fiddle demo。

参考文献：

来源

2013-10-08 18:12:52

整个'div'不再可点击。要采取这种方法，您需要遍历'div'的'p'。 – user2736012

嗯，是的;但是：“我试图让一些文本在你点击时发生变化，”鉴于文本在'p'内（因此它是'p'将被点击），我没有看到那样一个问题。 –

除非OP允许基于样式的超大点击区域。我的意思是必须有一些理由，在'div'上的处理程序在单个'div'中有一个'p'，不是？ – user2736012

你可以做这样的事情：

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

来源

2013-10-08 18:14:33 superken

但请注意，使用.toggle作为事件绑定已被弃用，并且随后从jquery内核中删除。 –

'this.html（）'不起作用，因为'this'不是一个jQuery对象。 – user2736012

几个答案在这里，有些将工作做好。这是另一种选择，使用类：

<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'); 
    }); 
});

我会更倾向于这种方案，因为它不依赖于什么元素中实际上包含。当然，除非你知道它永远不会改变，而且你可以可靠地瞄准字符串。

来源

2013-10-08 18:16:41

jQuery .click（）只能工作一次

回答

相关问题