How to confirm an action without confirm() in pop-in

Question

I have a script with some delete link in list.

When i click on one button, i have a function that display a pop-in with two button inside, to confirm or not the action.

A have no idea how to do it !

Here is my js :

$(document).on('click', '.delete-input', function(e) {
  e.preventDefault();
  var tags = $(this).parent().parent().parent().prev(); /* Cible la div .tags */
  var tagId = tags.find('.id p').text();
  var prov = tags.find('.prov p').text();
  var methode = "delete";

  let data = {
    "tagId": tagId,
    "prov": prov,
    "methode": methode
  };
  openModal(tagId);

  /*$.ajax({
    url: "path/to/script.php",
    type: "post",
    data: data,
    dataType: "json",
    success: function(code_html, statut, data) {
      tags.parent().remove();
    },
    error: function(resultat, statut, erreur) {
      console.log("La requête n'a pas aboutie...");
      console.log(resultat);
      console.log(statut);
      console.log(erreur);
    }
  });*/
});


function openModal(tagId, $prov, $methode) {
  var html = "<div class='confirm'>";
  html += "<p>Voulez vous vraiment supprimer le tag id : " + tagId + " ?</p>";
  html += "<div class='action-button'>";
  html += "<button class='action-tag delete-tag'>Oui</button>";
  html += "<button class='action-tag keep-tag'>Non</button>";
  html += "</div>";
  html += "</div>";
  $(".wrapper").prepend(html);
}

$(document).on('click', '.delete-tag, .keep-tag', function(e) {
		var clickedButton = $(this).attr("class");
		clickedButton = clickedButton.split(" ");
		clickedButton = clickedButton[1];

		if (clickedButton == "delete-tag") {
			alert("tag deleted !");
		}else if(clickedButton == "keep-tag"){
			alert("tag keeped !");
		}
	});

Answer 1

Add an event handler to your confirm button in the modal and call your delete function from that.

For example:

$(body).on('click', '.delete-tag', function () {
  delete();
});