我必须点击两次才能使用 jQuery 激活功能

Question

我在使用 jQuery 时遇到了很多麻烦。我必须在按钮上单击两次才能使页面消失。我尝试导入两个版本的 jQuery 并尝试在不同的元素上使用 fadeOut() 函数，但没有任何效果。它在我第二次单击时起作用，但从来没有在第一次单击时起作用。这是一个反复出现的问题，我需要知道如何解决它。这是我的代码：

HTML:

<body>
    <h1>CSS3 Buttons Showcase</h1>
    <a href="#" id="btn-1" onclick="fadeBg()">Click Me!</a>
</body>

JavaScript:

function fadeBg(){
            $("#btn-1").click(function(){
                $("body").fadeOut(1000);
            })
        }

Answer 1

您必须将函数更改为：

function fadeBg(){          
      $("body").fadeOut(1000);    
}

在您的 HTML 中，代码 onclick 被设置为运行您的函数 fadeBg。所以在你的函数中你必须把你想要的东西运行;在这种情况下 $("body").fadeOut(1000);

Answer 2

问题是在第一次单击时调用 fadeBg() 函数之前，您不会绑定 jQuery 事件处理程序。试试这个：

<h1>CSS3 Buttons Showcase</h1>
<a href="#" id="btn-1">Click Me!</a>

$(function() {
    $("#btn-1").click(function(){
        $("body").fadeOut(1000);
    })
});

Answer 3

您正在做同一个动作两次，代码是：

HTML

<body>
    <h1>CSS3 Buttons Showcase</h1>
    <a href="#" id="btn-1">Click Me!</a>
</body>

JavaScript

$(document).ready(function() {

 $("#btn-1").click(function(){
                $("body").fadeOut(1000);
            })
}

Answer 4

function fadeBg(){
            $("#btn-1").click(function(){
                $("body").fadeOut(1000);
            })
        }

您直接在 html 中添加了 onclick 事件。此函数向同一个按钮添加第二个事件。

只需删除元素中的 onclick 事件并执行此操作：

$("#btn-1").click(function(){
                    $("body").fadeOut(1000);
                })

直接在 html 元素中添加 onclick 事件被认为是不好的做法。可以，但是不好看

Answer 5

有两种方法可以将点击绑定到元素：

1.旧的脏内联javascript（避免）

(HTML) : <button onclick="doSomething()">

和2。更简洁的事件绑定

(HTML) : <button id="myButton">

(JS) : $('#myButton').click( doSometing )

您混合了两者，绑定了同一元素上的两次点击。

<button onclick="doSomething()">

function doSomething(){ // will be done on first click
  $('#myButton').click( doSometingElse ) // will be done on second click
}

我必须点击两次才能使用 jQuery 激活功能

I have to click twice to activate function using jQuery

javascript

jquery

click

fadeout