javascript - jQuery click事件触发器$ .confirm堆叠事件

我希望单击按钮或在焦点上按下Enter键时提交按钮，但是在我想显示确认警报之前，我会使用jquery-confirm向用户显示一些信息，当他接受模式时，目标表单必须提交。

由于某种原因，当我确认第一次可以，但是当我第二次看起来像$ .confirm正在堆叠，然后显示两次，在确认是否再次单击后它显示3次……为什么发生了什么？

我正在使用数据属性来选择元素和表单目标，我的代码摆弄了很多：

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

注意：我不想四处走走，我知道有很多可能的选择，但我想知道出什么问题了。

的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?');
              }
          }
      }
    });
    }

})
});

最佳答案

在您的小提琴中，您更新了整个JS代码，如下所示，它似乎正常工作。附言脚本$(this).confirm({上的行号9已更改为$.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();
          }
        });
        }

    })
});

更新
Javascript部分已更新为

$(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?');
                  }
              }
          }
        });
        }

    })
});

堆栈的原因是您使用的是$(this).confirm而不是$.confirm。即，确认函数与JQuery关联，并且由于您使用的是this，因此它并没有在第一时间绑定。其次，confirm的语法需要按钮来采取必要的操作，而这些操作也是以前所缺少的。希望这可以澄清。

关于javascript - jQuery click事件触发器$ .confirm堆叠事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43674314/