Question

每当我再次运行函数时单击按钮。为什么？

我必须点击两次，但我不会只是一次。

在谷歌浏览器中试用此代码。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <div id="one" > &nbsp Srboljub Petrovic</div>
        <input type="button" id="f" value="Klikni" onclick="f1();"></input>
        <script>
        function f1()
        {
            $("#f").click(function()
            {
                $("#one").slideUp();
                $("#one").css("border", "5px solid gray");
                $("#one").css("background-color", "red");
                $("#one").css("color","white");
                $("#one").slideDown();
            });
        }
        </script>
    </body>
</html>

Answer 1

您在单击处理程序中绑定了一个单击处理程序，因此每次单击该按钮时，都会绑定一个新的单击事件处理程序，并且它会不断加起来。

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript">
          $(function() {
            $("#f").on('click', function() {
               $("#one").slideUp(function() {
                  $(this).css({border         : "5px solid gray",
                               backgroundColor: "red",
                               color          : "white"})
                         .slideDown();
               });
            });
          });
        </script>
    </head>
    <body>
        <div id="one">&nbsp Srboljub Petrovic</div>
        <input type="button" id="f" value="Klikni" />
    </body>
</html>

请注意，input元素没有结束标记，jQuery方法是可链接的此外，要在向下滑动元素后向上滑动，请使用回调。

Answer 2

这种情况正在发生，因为您在HTML中分配了点击处理程序，然后在每次调用时再次在f1中分配另一个处理程序。如果您使用Javascript分配事件处理程序，则不应在HTML中分配它们：

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  </head>
  <body>
    <div id="one" > &nbsp Srboljub Petrovic</div>
    <input type="button" id="f" value="Klikni"></input>
    <script>
      $("#f").click(function(){
        $("#one").slideUp();
        $("#one").css("border", "5px solid gray");
        $("#one").css("background-color", "red");
        $("#one").css("color","white");
        $("#one").slideDown();
      });
    </script>
  </body>
</html>

Answer 3

在绑定点击功能之前，请确保取消绑定。

function f1()
{
    $("#f").unbind("click").click(function()
    {
        //code
    });

}

每次单击都会将其功能的性能提高到一个

3 个答案: