event.preventDefault doesnt work when i use formData with constructor

event.preventDefault() doesnt work when i use formData with constructor , but when i used $("#obatForm").serialize(), it works. but its impossible to use serialize because the form im using are from jquery html like this

$(document).ready(function () {
  $("#addNav").click(function (event) {
    event.preventDefault();

    const dataList = $("#results");
    const formAdd = $(` 
    <div class="container-input bg-FAFAFA">
    <!--input-->
  
    <form
      enctype="multipart/form-data"
      id="obatForm"
      class="m-8 p-9 grid grid-cols-2 bg-FAFAFA rounded-lg"
    >
      <label for="nama">Nama : </label>
      <input
        type="text"
        name="nama"
        id="nama"
        class="m-2 border border-solid text-teal-950"
      />
      <label for="kode">Kode : </label>
      <input
        type="text"
        name="kode"
        id="kode"
        class="m-2 border border-solid text-teal-950"
      />
      <label for="fisik">Fisik : </label>
      <select name="fisik" id="fisik" class="border m-2">
        <option>Kapsul</option>
        <option>Tablet</option>
        <option>Inject</option>
        <option>Sirup</option>
        <option>Pil</option>
        <option>Inhale</option>
        <option>Infus</option>
        <option>Tetes</option>
        <option>Larutan</option>
        <option>Salep</option>
        <option>Kaplet</option>
        <option>Cairan</option>
        <option>Tempel</option>
      </select>
      <label for="harga">Harga : </label>
      <input
        type="text"
        name="harga"
        id="harga"
        class="m-2 border border-solid text-teal-950"
      />
      <label for="stok">Stok : </label>
      <input
        type="text"
        name="stok"
        id="stok"
        class="m-2 border border-solid text-teal-950"
      />
      <label for="gambar">Gambar:</label>
      <input
        type="file"
        name="gambar"
        id="gambar"
        class="m-2 border border-solid text-teal-950"
      />
  
      <div class="w-full">
        <button
          id="submitButton"
          type="cutton"
          class="border border-teal-200 px-2 hover:bg-emerald-400 rounded-md bg-green-200"
        >
          Tambah
        </button>
      </div>
    </form>
  </div>
  
  <div id="dataObat"></div>
  `);
    dataList.html("");
    dataList.append(formAdd);
  });
});

this is the send code to node js within data and image and the issue is the preventdefault will not work because of the constructor or not using serialize

$(document).on("submit", "#obatForm", function (event) {
  event.preventDefault();

  const formData = new FormData(this); // Ctambah new form data biar enctype included

  $.ajax({
    url: "http://localhost:3000/submit",
    method: "POST",
    data: formData,
    processData: false, // Prevent jQuery from processing the data
    contentType: false, // Prevent jQuery from setting contentType
    dataType: "json",
    beforeSend: function () {
      $("#message").html("").fadeIn();
      var loading = $("<img>")
        .attr("src", "../images/spin.gif")

        .addClass("w-5 mx-2 filter invert");
      $("#submitButton").html("").prop("disabled", true).prepend(loading);
    },
    success: function (data) {
      $("#submitButton").prop("disabled", false);
      if (data.message) {
        // Assuming you have a button with the id "myButton"

        var img = $("<img>")
          .attr("src", "../images/bell.png")

          .addClass("w-5 mx-2 filter invert");

        $("#message")
          .html("Berhasil !")
          .fadeIn(2000)
          .prepend(img)
          .fadeOut(4000)
          .css("background-color", "green");

        $("#submitButton").html("Tambah");
        $("#obatForm")[0].reset();
        $("#addNav").trigger("click");
      } else {
        $("#message").html("Data gagal ditambahkan").fadeOut(3000);
      }
    },
    error: function (xhr, status, error) {
      var img = $("<img>")
        .attr("src", "./images/bell.png")
        .addClass("w-3 mx-2 filter invert");

      $("#message").html("").fadeIn();
      console.error("AJAX error:", error);
      $("#submitButton").html("Tambah").prop("disabled", false);
      $("#message")
        .html("Gagal Ditambahkan")
        .prepend(img)
        .css("background-color", "red")
        .fadeOut(4000);
    },
  });
});

im trying to change the form with normal form with serialize, it makes the preventdefault work again but it makes the data undefined because i have images to upload to multer node js.