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

Question

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

不知道为什么我第一次确认的时候还可以，但是第二次的时候好像是$.confirm在堆叠，然后显示了两次，确认后如果我再次点击它显示了3次。 .. 为什么会这样？

我将数据属性用于 select 元素加表单目标，我的代码有一个 fiddle：

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

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

出现此问题是因为您的按钮位于表单元素之外，这可能会导致问题
将按钮放在表单元素中，并在按钮中包含 type="sumbit"。

看下面的功能，按你的需要定制。

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");
            }
        }
    });
    }
   }

在表单的 onsubmit 事件中调用此函数。它将解决问题。

Answer 2

在您的 fiddle 中更新了您的整个 JS 代码，如下所示，它似乎工作正常。 P.S。脚本 $(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 的语法需要按钮来执行以前也缺少的必要操作。希望这能澄清。

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

    })
});

原因是，一旦你点击'confirm'按钮，就会创建一个新元素'jconfirm'，你可以看到'Elements'选项卡，所以你每次都需要删除它。

Answer 4

您无需在每次点击时重新定义确认对象，只需一次。为了防止粘性确认对话框行为，您可以添加一个控制变量，因此确认定义只发生一次。按照您的代码：

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

您可能还想解决其他问题，因为 keyup 事件应该附加到输入字段而不是按钮（我猜）。此解决方法仅针对确认行为。

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

jQuery click event trigger $.confirm stacking the event

javascript

jquery

jquery-confirm