javascript - jQuery点击事件触发$.confirm堆叠事件

Question

我想要一个按钮在单击或在焦点上按下回车键时提交表单，但在我想显示确认警报之前使用 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?');
              }
          }
      }
    });
    }

})
});

Answer 1

在您的 fiddle 中更新了您的整个 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。也就是说，confirm 函数与 JQuery 相关联，并且由于您使用了 this，所以它一开始就没有被绑定(bind)。其次，confirm 的语法需要按钮来执行以前也缺少的必要操作。希望这能澄清。