Question

我有这个天气页面，每次点击按钮，它都会从Celcius变为Fahrenheit，反之亦然。

发生的事情是，一旦我第一次点击，它工作正常，但如果我再次点击它或更多次，我的控制台日志显示它执行两次并且不再渲染元素（#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);
        });

我将整个档案包括在内：

＆＃13;

$(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>";

			$("#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;
					console.log(flag);
				} else if (flag == 1){
					console.log("f to c");
					html2 += "<h1>" + Math.round(json.main.temp) + " °C</h1>";
					flag = 0;
					console.log(flag);
				}
				html2 += "</button>"
				$("#link").html(html2);
			});

            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);
        });
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

那是因为你正在重新创建click事件处理程序中的按钮。您应该更改处理程序中h1标记的内容，而不是重新创建整个按钮，如下所示：

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

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

1 个答案: