Question

我的index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script src="jquery.js"></script>
    <script>
     $(function(){
       $("button").click(function(){
         $("div").load("AJAX_page.php");
       });
       $("span").on("click",function(){alert("This function is necessary")})   
     });
    </script>
  </head>
  <body>
   <button>LOAD</button>
   <span>Click on me After clicking on button</span>
   <div></div>
  </body>
</html>

我的AJAX_page.php

<body>
<script>
$(function() {
    $("span").on("click", hello);

    function hello() {
        alert("hi");
    }
});
</script>
</body>

现在我的问题是

首先点击按钮，然后点击它将提醒你好并且此功能是必要的
再次，如果您点击按钮，它将提醒你好和 此功能是必要的 2次
再次，如果您点击按钮，它将提醒你好和 此功能是必要的 3次，依此类推

现在我希望它只提醒这个功能是必要的和你好，无论点击按钮多少次都会一次？

Answer 1

通常你解除绑定以前绑定的事件处理程序：

$("span").off('click', hello).on('click', hello);

这不适用于您的情况，因为在每次评估JavaScript代码时，都会创建一个新的hello函数，该函数与您之前绑定的函数不同。

但一切都没有丢失：您可以使用namespaced events ^[docs]，只解除绑定特定处理程序：

$("span").off('click.foo').on('click.foo', hello)

或者只在可能的情况下加载其他代码一次。

Answer 2

每次单击按钮时，都会运行AJAX_page.php文件中的脚本，这意味着每次单击按钮时都会附加一个新的事件处理程序。

大概你在这里提供的代码是你真正想要做的事情的抽象，所以我不知道你是否真的需要按钮在每次点击时只在AJAX_page.php中运行脚本或只是一次。如果您只需要一次，则使用$("button").one("click", function() { ... })附加按钮上的点击处理程序;这将在您第一次按下按钮后取消绑定处理程序，以便在您第一次按下按钮时跨度获得其onclick事件，但随后按下按钮时没有任何反应。

如果AJAX_page.php文件将在不同时间从服务器返回不同的内容，并且在按下按钮时应更新跨度上的警报，则需要取消绑定先前连接的处理程序，如前所述答案表明。（'foo'可以是您想要的任何字符串，用于标识此单击事件，而不是同一元素上的其他点击事件;对于此示例，'hello'可能更为重要。）

alert（）发出的警报超出预期

2 个答案: