Knopf scheint nur vorgewählt und Brände werden nach 2 Klicks

Wenn ich die Erweiterung Taste klicken Sie auf die plugin.html in ganz gut geht, aber der erste Knopf scheint es, ohne klicken oder schweben vorgewählt werden:Knopf scheint nur vorgewählt und Brände werden nach 2 Klicks

$(document).ready(function(){ 
 
    $(".copy").click(function() { 
 
     $(".status").show().removeClass('hide').text("You successfully copied the answers."); 
 

 
     getAnswers(); 
 

 
     setTimeout(function() { 
 
      $(".status").fadeOut(); 
 
     }, 5000); 
 
    }); 
 

 
    $(".paste").click(function() { 
 
     $(".status").show().removeClass('hide').text("You successfully pasted the answers."); 
 

 
     getAnswers(); 
 

 
     setTimeout(function() { 
 
      $(".status").fadeOut(); 
 
     }, 5000); 
 
    }); 
 
}); 
 

 
function getAnswers(){ 
 
    console.log('In getAnswers'); 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <meta charset="utf-8"> 
 
    <meta name="description" content="This extension helps copy and paste questions and answers for the Kinesiology institute."> 
 
    <meta name="author" content="Chris Breuer"> 
 

 
    <title>Title</title> 
 

 
    <!-- Scripts --> 
 
    <!--Needed in an extension, but not in this snippet 
 
    <script src="js/jquery-3.1.1.min.js"></script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <script src="js/popup.js"></script> 
 
    --> 
 

 
    <!-- Cascading Style Sheets --> 
 
    <!-- Need a different source for the Bootstrap CSS in this snippet 
 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
 
    --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link href="css/custom.css" rel="stylesheet" media="screen"> 
 

 
</head> 
 
\t 
 
<body> 
 
    
 
    <button class="btn btn-default copy" style="margin-left: 15px">Copy Answers</button> 
 
    <button class="btn btn-default pull-right paste" style="margin-right: 15px">Paste Answers</button> 
 

 
</body> 
 
</html>

Wie kann ich sicherstellen, dass es nicht zwei Klicks nimmt auf die Schaltflächeabzufeuern?

Quelle

2017-03-10 Chris Palmer Breuer

$ (". Copy"). Blur(); und $ (". paste"). blur(); ? – ApolloSoftware

Ich habe Ihren Code in ein Snippet verschoben und eine nackte 'getAnswers()' Funktion hinzugefügt. Dies zeigt, dass das Problem nicht durch den von Ihnen bereitgestellten Code dupliziert wird. Bitte geben Sie einen ausreichenden Code an, ein [mcve], der das Problem dupliziert. Es ist möglich, dass ein Teil dieses Problems darin besteht, dass es als Popup in einer Chrome-Erweiterung angezeigt wird. Wenn das der Fall ist, benötigen wir ein * manifest.json * und genügend Code (einschließlich der Angabe, welche Versionen der Bibliotheken Sie verwenden), damit wir das Problem duplizieren können. [Es scheint auch einige * custom.css * -Codes zu geben, auf die verwiesen wird, die aber nicht enthalten sind]. – Makyen

In Bezug auf den Fokus, wie wäre es mit dem Hinzufügen einer manuellen Unschärfe (Verlust des Fokus) auf das Element innerhalb Ihrer $ (Dokument) .ready Funktion? Ich würde es oben halten.

$(".copy").blur();

Quelle

2017-03-10 20:27:29

Können Sie hinzufügen

$(document).ready(function(){ 
    $(".copy").blur(); 
    $(".paste").blur(); 
...

auf Ihre jQuery? Das sollte den Fokus verlieren.

Quelle

2017-03-10 20:32:42 ApolloSoftware

Knopf scheint nur vorgewählt und Brände werden nach 2 Klicks

Antwort

Verwandte Themen