為什么jQuery on / off方法的行為與外部腳本不同

Question

嵌入腳本時，單擊標題可在問候/再見之間切換。 當代碼在外部腳本中時，為什么它僅能單擊兩次？

嵌入式機箱：

<html>    
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>    
<body>
<h1 id="title" onclick="sayGoodbye();"> Hello </h1>
<script type="text/javascript">
function sayGoodbye() {
console.log("goodbye");
$("#title").html("Goodbye");
$("#title").click(function() {
$("#title").html("Hello");
$("#title").off("click");
});
};
</body> 
</script>

外部情況：

<html>
<head>
<meta charset="UTF-8">
<title>Jquery click</title>
</head>
<body>

<h1 id="title"> Hello </h1>
<script src="jquery.js"></script>
<script src="click.js"></script>
</body>
</html>

這是click.js：

function sayGoodbye() {
 console.log('goodbye');
 $('#title').html('Goodbye');
 $('#title').click(function () {
  console.log('hello');
  $('#title').html('Hello');
  $('#title').off('click');
 });
}

$(function(){$('#title').on('click', sayGoodbye);});

Answer 1

在第二個示例中， .off將注銷兩個事件處理程序。 從文檔：

如果提供了簡單的事件名稱（例如“ click”），則將從jQuery集的元素中刪除該類型的所有事件（直接事件和委托事件）。

在第一個示例中，這不是問題，因為您自己而不是通過jQuery的API來內聯附加第一個處理程序。

對於這種情況，更簡潔的解決方案是簡單地連接單個處理程序並維護/切換其狀態：

$(function () {
    var isHere = true;
    $('#title').click(function () {
        $(this).html(isHere ? 'Goodbye' : 'Hello');
        isHere = !isHere;
    });
});

在事件（沒有雙關語意）你是否確實需要掛鈎的事件處理程序只有一個調用，不要忘了， one也存在。

為什么jQuery on / off方法的行為與外部腳本不同

問題描述

1 個解決方案

解決方案1
2 已采納 2015-09-26 15:58:04

為什么jQuery on / off方法的行為與外部腳本不同

問題描述

1 個解決方案

解決方案1 2 已采納 2015-09-26 15:58:04

解決方案1
2 已采納 2015-09-26 15:58:04