jQuery click event trigger $.confirm stacking the event

Question

I want a button to submit a form when is clicked or the enter key is pressed on focus, but before I want to display a confirm alert displaying some information to the user using jquery-confirm, when he accepts the modal then the target form must submit.

For some reason when I confirm the first time is OK, but when I do a second time looks like the $.confirm is stacking, then is displayed two times, after confirm if I click again it's displaying 3 times... Why this is happening?

I'm using data attributes to select the element plus form target, there is a fiddle with my code:

https://jsfiddle.net/z3mn21dz/7/

Note: I don't want a walk around, I know there's a lot of possible alternatives but I want to know what's wrong.

HTML

<button data-role="confirm" data-target="target">
  Submit
</button>

<h1>Form to submit</h1>
<form action="" id="target"><input type="text"></form>

JS/jQuery

$(document).ready(function($){

$('[data-role="confirm"]').on('keyup click', function (e) {
        e.preventDefault();
    var target = $(this).data('target');

    if(e.keyCode == 13 || e.type == "click")
    {
    $(this).confirm({
      title: 'Confirm!',
      content: 'Simple confirm!',
      buttons: {
          confirm: function () {
              $.alert('Confirmed!');
          },
          cancel: function () {
              $.alert('Canceled!');
          },
          somethingElse: {
              text: 'Something else',
              btnClass: 'btn-blue',
              keys: ['enter', 'shift'],
              action: function(){
                  $.alert('Something else?');
              }
          }
      }
    });
    }

})
});

Answer 1

You don't need to re-define the confirm object in every click, only once. In order to prevent the sticky confirm dialog behaviour you can add a control variable, so the confirm definition only happens once. Following your code:

$('[data-role="confirm"]').on('keyup click', function (e) {
  if ($(this).data.defined) {return;}
  $(this).data.defined = true;
  //...

There are other issues you might want to fix, as the keyup event should be attached to the input field rather than the button (I'm guessing). This workaround is focused on the confirm behaviour only.

Answer 2

In your fiddle updated your entire JS code like below and it seems working properly. P.S. Line number line 9 on the script $(this).confirm({ was changed to $.confirm({.

$(document).ready(function(){

    $('[data-role="confirm"]').on('keyup click', function (e) {
            e.preventDefault();
        var target = $(this).data('target');

        if(e.keyCode == 13 || e.type == "click")
        {
        $.confirm({

          icon: 'fa fa-exclamation-triangle',
          confirmButton: 'bestätigen',
          confirmButtonClass: 'btn btn-danger',
          cancelButton: 'abbrechen',
          confirm: function(ee){
             $( "#"+target ).submit();
          }
        });
        }

    })
});

UPDATE The Javascript part is updated as

$(document).ready(function($){


    $('[data-role="confirm"]').on('keyup click', function (e) {
            e.preventDefault();
        var target = $(this).data('target');

        if(e.keyCode == 13 || e.type == "click")
        {
        $.confirm({
          title: 'Confirm!',
          content: 'Simple confirm!',
          buttons: {
              confirm: function () {
                  $.alert('Confirmed! Target: '+target);
              },
              cancel: function () {
                  $.alert('Canceled!');
              },
              somethingElse: {
                  text: 'Something else',
                  btnClass: 'btn-blue',
                  keys: ['enter', 'shift'],
                  action: function(){
                      $.alert('Something else?');
                  }
              }
          }
        });
        }

    })
});

The reason for your stack was that you were using $(this).confirm instead of $.confirm. i.e., the confirm function was associated with JQuery, and since you used this it was not getting bound at first instance. Secondly, the syntax of confirm needs buttons to take the necessary actions which too was missing before. Hope this clarifies.

Answer 3

$(document).ready(function($){
    $('[data-role="confirm"]').on('keyup click', function (e) {
            e.preventDefault();
        var target = $(this).data('target');

        if(e.keyCode == 13 || e.type == "click")
        {
        $(this).confirm({
          title: 'Confirm!',
          content: 'Simple confirm!',
          buttons: {
              confirm: function (e) {
                  $.alert('Confirmed! Target: '+target);
                  $('.jconfirm').remove();
              },
              cancel: function () {
                  $.alert('Canceled!');
              },
              somethingElse: {
                  text: 'Something else',
                  btnClass: 'btn-blue',
                  keys: ['enter', 'shift'],
                  action: function(){
                      $.alert('Something else?');
                  }
              }
          }
        });
        }

    })
});

The reason is, once you click 'confirm' button, a new element 'jconfirm' is created,you can see the 'Elements' tab, so you need to remove it everytime.

Answer 4

This issue is happening because your button is outside the form element, it might cause the issue
Take the button within your form element and include type="sumbit" in the button.

Look the following function, customize as you needed.

function confirmDel(e){
        e.preventDefault();

    $('#dialog-confirm').dialog({
        resizable:false,
        height:"auto",
        width:300,
        modal:true,
        buttons:{
            "Confirm Delete":function(){
                  e.target.submit();
                $(this).dialog("close");
            },Cancel:function(e){
                e.preventDefault();
                $(this).dialog("close");
            }
        }
    });
    }
   }

Call this function in the onsubmit event of your form. It will solve the issue.