Soy nuevo en la codificación y, por alguna razón, cuando creo este botón, debería poder buscar una ciudad anterior. en su lugar recarga la página. Probé event.preventdefault pero parece que no funciona. cualquier ayuda sería muy apreciada.

 $("#search").on("click", function(event){ event.preventDefault(); var input = $("#city").val(); console.log("input: " + input); searchWeather(input); }); // searches previous cities at button press. $(".cityButton").on("click", function(event){ event.preventDefault(); var btnVal = this.text; console.log(btnVal); }); // function for adding cities to list function addCity(x){ var newLi = $("<li>"); // newLi.text(x); $("#cities").append(newLi); var button = $("<button>"); button.text(x); button.addClass("btn btn-secondary cityButton mb-2"); newLi.append(button); container.push(x); console.log(container); for(var i = 0; i < container.length; i++){ localStorage.setItem(i, container[i]); } localStorage.setItem("Number", container.length); } function pageOpen(){ var num = localStorage.getItem("Number"); for(var i = 0; i < num; i++){ container.push(localStorage.getItem(i)); } for(var i = 0; i < container.length; i++){ var li = $("<li>"); $("#cities").append(li); var ogButton = $("<button>"); ogButton.text(container[i]); ogButton.addClass("btn btn-secondary cityButton mb-2"); li.append(ogButton); } console.log(container); }