Question

我想要一个按钮在点击时提交一个表单或者在焦点上按下回车键，但在我想要显示一个确认警报显示用户使用jquery-confirm时，当他接受模态时然后目标表格必须提交。

出于某种原因，当我确认第一次是OK，但是当我第二次看起来像$ .confirm堆叠时，则显示两次，确认后再次点击它显示3次...为什么会这样？

我正在使用数据属性来选择元素加上表单目标，我的代码有一个小提琴：

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

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

在您的小提琴中更新了您的整个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，因此它不会受到第一个实例的约束。其次，确认语法需要按钮来采取之前也缺少的必要操作。希望这澄清。

Answer 2

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

    })
});

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

Answer 3

发生此问题是因为您的按钮位于表单元素之外，可能会导致问题发生点击表单元素中的按钮，并在按钮中加入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 4

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

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

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

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

4 个答案: