1

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

})
});
4

4 回答 4

1

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

    })
});

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

于 2017-05-02T08:02:06.580 回答
1 
$(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”，您可以看到“元素”选项卡，因此每次都需要将其删除。

于 2017-05-02T08:49:06.397 回答
0

发生此问题是因为您的按钮位于表单元素之外，这可能会导致问题
在您的表单元素中获取按钮并包含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在您的表单中调用此函数。它将解决问题。

于 2017-04-28T07:32:47.927 回答
0

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

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

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

于 2017-05-04T01:41:41.753 回答