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

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

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

Answer 4

您正在执行两次相同的操作，代码为：

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

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

您直接在html中添加了onclick事件。此功能将第二个事件添加到同一按钮。

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

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

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

我必须单击两次才能使用jQuery激活函数

5 个答案: