必须单击两次按钮才能执行功能 - jQuery答案

【问题标题】：Have to Click Button Twice to Perform Function - jQuery必须单击两次按钮才能执行功能 - jQuery
【发布时间】：2013-10-31 19:26:39
【问题描述】：

出于某种原因，我必须按两次按钮才能执行分配给它的功能，也许与有两个点击事件有关？但是，如果我删除“$(buttonNumber).on('click', function ()”，脚本就会中断。我计划将此函数用于多个按钮，这就是为什么它必须在一个函数中。

HTML：

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">

        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="test2.js"></script>

    </head>

 <body>

<button id="button1" onclick="nextSlide('#button1', '#1', '#2')">Hide it</button>
<p id="1">Hide this text</p>
<p id="2">Show this text</p>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
</html>

JS：

window.onload=function(){
    $('#2').fadeOut(1);

};

function nextSlide(buttonNumber, hideDiv, showDiv) {
    $(buttonNumber).on('click', function () {
            $(hideDiv).hide("slide", 2000, function(){
                $(showDiv).show("slide", 2000);
            });
    });
};

【问题讨论】：

为什么要同时包含jquery的v1和v2？这是没有必要的。删除一个，看看您的问题是否仍然存在。
其中之一是滑动功能所需的jQuery UI库。
;-) 既然你提到了它……：P sry 4 噪音！

标签： javascript jquery html button user-interface

【解决方案1】：

您在每次点击时绑定事件。您应该只在点击事件中执行代码。

function nextSlide(buttonNumber, hideDiv, showDiv) {
    //$(buttonNumber).on('click', function () {
            $(hideDiv).hide("slide", 2000, function(){
                $(showDiv).show("slide", 2000);
            });
    //});
};

注释部分绑定了一个点击事件，但是你已经在你的html中做了这个：

onclick="nextSlide('#button1', '#1', '#2')"

【讨论】：

更好的答案是不使用内联绑定。