0

当我在每次功能再次运行时单击按钮时。为什么？

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

在 google chrome 中尝试此代码。

<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>
4

3 回答 3

2

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

<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>

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

于 2013-06-21T23:12:38.003 回答
1

发生这种情况是因为您在 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>
于 2013-06-21T23:12:44.843 回答
1

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

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

}
于 2013-06-21T23:13:18.283 回答