按钮被触发两次，元素不再被渲染

问题描述：

我有这个天气页面，每次我点击按钮它从Celcius变为华氏温度或反之亦然。按钮被触发两次，元素不再被渲染

发生的事情是，一旦我第一次点击，它就可以正常工作，但如果再次单击它，我的控制台日志会显示它执行了两次并且不再呈现该元素（#link ）。

  $("#data").on('click', '#link', function() { 
      var html2 = ""; 
      html2 += '<button class="temp" id="link">' 
      if (flag == 0){ 
       console.log("c to f"); 
       html2 += "<h1>" + celciusToFahrenheit(Math.round(json.main.temp)) + " °F</h1>"; 
       flag = 1; 
      } else if (flag == 1){ 
       console.log("f to c"); 
       html2 += "<h1>" + Math.round(json.main.temp) + " °C</h1>"; 
       flag = 0; 
      } 
      html2 += "</button>" 
      $("#link").html(html2); 
     });

我在内的整个文件波纹管：

$(document).ready(function() { 
 
    function getCurrentLocation(callback) { 
 
     if (!navigator.geolocation) return; 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 
      latitude = position.coords.latitude; 
 
      longitude = position.coords.longitude; 
 
      url = ('http://api.openweathermap.org/data/2.5/weather?lat=' + latitude + '&lon=' + longitude + '&units=metric&appid=b464bb8dd84e7e7d36103593a472ae9a'); 
 
      callback(url); 
 
     }); 
 
    } 
 

 
    function celciusToFahrenheit(celcius) { 
 
     var fahrenheit = celcius * (9/5) + 32; 
 
     return fahrenheit; 
 
    } 
 

 
    getCurrentLocation(function(currLocMap) { 
 
     $.getJSON(url, function(json) { 
 
      var html = ""; 
 
      var flag = 0; 
 

 
      html += '<button class="temp" id="link">' 
 
      html += "<h1>" + Math.round(json.main.temp) + " °C </h1>"; 
 
      html += "</button>" 
 

 
      html += "<h1>" + json.name + "</h1>"; 
 
      html += "<h3>" + json.weather[0].main + "</h3>"; 
 
      html += "<h3>" + json.weather[0].description + "</h3>"; 
 

 
\t \t \t $("#data").on('click', '#link', function() { 
 
\t \t \t \t var html2 = ""; 
 
\t \t \t \t html2 += '<button class="temp" id="link">' 
 
\t \t \t \t if (flag == 0){ 
 
\t \t \t \t \t console.log("c to f"); 
 
\t \t \t \t \t html2 += "<h1>" + celciusToFahrenheit(Math.round(json.main.temp)) + " °F</h1>"; 
 
\t \t \t \t \t flag = 1; 
 
\t \t \t \t \t console.log(flag); 
 
\t \t \t \t } else if (flag == 1){ 
 
\t \t \t \t \t console.log("f to c"); 
 
\t \t \t \t \t html2 += "<h1>" + Math.round(json.main.temp) + " °C</h1>"; 
 
\t \t \t \t \t flag = 0; 
 
\t \t \t \t \t console.log(flag); 
 
\t \t \t \t } 
 
\t \t \t \t html2 += "</button>" 
 
\t \t \t \t $("#link").html(html2); 
 
\t \t \t }); 
 

 
      console.log(json); 
 
      console.log(json.name); 
 
      console.log(json.main.temp); 
 
      console.log(json.weather[0].main); 
 
      console.log(json.weather[0].description); 
 
      console.log(json.weather[0].icon); 
 

 
      $("#data").html(html); 
 
     }); 
 
    }); 
 
});

button#link { background:none;border:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Weather</title> 
 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <!-- jQuery library --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <!-- Latest compiled JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <script type="text/javascript" src="script.js"></script> 
 
    <!-- <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> --> 
 
</head> 
 

 
<body> 
 
    <div id="data"> 
 
     <h4>You are here:</h4> 
 
    </div> 
 

 

 
</body> 
 

 
</html>

请附上您的HTML代码 –

那是因为你是渲染里面本身相同的元素？你能否向我们展示HTML代码以获得更好的清晰度？此外，一个页面不能有2个元素具有相同的标识符#JustAnFYI –

该html非常空。我只是用一个实际上我从天气API – Zzeks

答

那是因为你要重新单击事件处理程序中的按钮。您应该更改h1标签的内容，您的处理程序，而不是重新创建整个键，像这样：

$("h1",$(this)).html("new content");

得到的东西替换了一个div＃数据，谢谢你完全工作！你知道如何解释为什么创建一个新按钮使它无法工作了？如果我确实需要创建其他按钮，那我该如何让它们工作？ – Zzeks

按钮被触发两次，元素不再被渲染

相关推荐