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（）只能工作一次

回答

相關問題