Weather App - preventDefault only works once?

General
1

I’m trying to get the temperature switching mechanism on my weather app working properly. It does work, sort of…but not well.

I’m currently just using a plain text link to say “view in Fahrenheit” or “view in Celsius.” A jQuery statement monitors clicks on the link and toggles between the two temperature scales accordingly.

$(".switchCF").click(function(e) {
        e.preventDefault();
        if (displayTemp === tempF) {
          displayTemp = tempC;
        } else {
          displayTemp = tempF;
        }
        $("#temperature").html("Temperature: " + displayTemp);
      });

I’m trying to use the prevent default method to keep a click event from triggering a page load. This works once - the page defaults to Fahrenheit, and clicking “view in Celsius” behaves exactly as I expect it to. Once the content is refreshed, clicking the second link to toggle the display back to Fahrenheit triggers a page load. While the page refresh technically brings you back to the fahrenheit display, it’s not ideal. Any thoughts as to why this is happening?

Here’s the pen for any further context (it’s still a barebones work in progress…trying to get the functionality down before I make it pretty :slight_smile:

3

Thanks for steering me in the right direction! It took a little bit of time to unravel some of my spaghetti code, but I think I’ve settled on a decent (or at least “good enough”) solution now.

I decided to change the item being watched from an “a” link to a button, which got rid of my preventDefault() issue, then switched out the jQuery .click() for a .delegate() method, and now it works the way I’d expect it to.

5

Thanks again - yet another reason it’s important to pay attention to posting dates when reading Stack Overflow…