Javascript jQuery单击事件触发器$。确认堆叠事件

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

由于某些原因，当我第一次确认时是可以的，但当我第二次确认时，看起来$.confirm正在堆叠，然后显示两次，确认后，如果我再次单击，它将显示3次。。。为什么会这样

我正在使用数据属性选择element plus表单目标，我的代码有一个小问题：

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

HTML

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

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

---

发生此问题是因为您的按钮位于表单元素之外，它可能会导致此问题
在表单元素中选择按钮，并在按钮中包含

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

事件中调用此函数。它将解决这个问题。

在你的小提琴中更新了整个JS代码，如下所示，它似乎工作正常。脚本

$上的P.S.行号第9行（此）.confirm（{

已更改为

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

    })
});

使用堆栈的原因是使用了

$（此）.confirm

而不是

$.confirm

。也就是说，confirm函数与JQuery相关联，并且由于您使用了

此

，因此它在一开始就没有被绑定。其次，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")
        {
        $(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?');
                  }
              }
          }
        });
        }

    })
});

---

原因是，单击“确认”按钮后，将创建一个新元素“jconfirm”，您可以看到“Elements”选项卡，因此每次都需要将其删除。

您不需要在每次单击中重新定义确认对象，只需一次。为了防止粘性确认对话框行为，您可以添加一个控制变量，以便确认定义只发生一次。请遵循您的代码：

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

---

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

您能关注我的代码并告诉我我做错了什么吗？：）为什么需要e.preventDefault（）；在代码中，因为您没有提交不必要的表单。可能会导致问题我不确定，请给它一个快照，因为在我的原始代码中，我在表单中有

按钮，但它会提交另一个按钮。最好为单独的表单设置单独的按钮，并且不要为两个不同的表单提交使用一个按钮，因为这也是原因您可能会得到错误…从您的代码中，似乎“确认”功能不起作用，即使在两次单击后也不起作用。如果它真的起作用，我会看到德语单词和带有危险按钮的感叹号三角形，我不这么认为。问题不在两次单击中function@mnemosdev很抱歉，我的示例错误，现在我更新了我的问题。但是
确认：
操作不起作用：当按钮添加了确认操作将起作用
按钮：{confirm:function（）{$.alert（'Confirmed！'）；}，cancel:function（）{$.alert（'Cancelled！'）；}，
更新您的答案并添加原因说明（请：）根据请求更新请在您的答案中发布您的代码，而不是作为图像链接。无法保证图像将来会存在，并且您建议的更改也不是很清楚。
$('[data-role="confirm"]').on('keyup click', function (e) {
  if ($(this).data.defined) {return;}
  $(this).data.defined = true;
  //...