Search code examples
javascriptjquerybootstrap-modaljquery-confirm

jquery-confirm $.confirm triggers multiple modals at single click


I'm using jquery-confirm plugin and Bootstrap 3. The confirmation works fine but if I open any bootstrap modal on the page before clicking the confirmation button, two confirmation box pop up. If I open bootstrap modal 5 times before clicking the confirmation button, It triggers five confirmation box at the same time overlaying one after another. Why this happening?

Here is my js:

      $('body').on('click', '.confirm', function(e) {
	    e.preventDefault();

	    var form = this.closest("form");

	    $.confirm({
	        title: "confirmation",
	        content: "Are you sure?",
	        buttons: {
	          'confirm': {
	              text: 'proceed',
	              keys: ['enter'],
	              btnClass: 'btn-red',
	              action: function () {
	                form.submit();
	              }
	          },
	          'cancel': {
	              text: 'cancel',
	              action: function () {
	                return false;
	              }
	          },
	        }
	    });
	  });

What I'm doing wrong?


Solution

  • The problem was in my code. There was a point where the confirmation reinitialize every time when loading a modal. That makes it trigger multiple times for a single button. Move the initialization code to another place solved the issue. Thank you guys.