im new to coding and for some reason when i create this button it should be able to search a previous city. instead it reloads the page. I tried the event.preventdefault but it doesnt seem to work. any help would be greatly appreciated.

$("#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);
}