Question

我遇到了jquery提交按钮onclick和默认事件的问题。我想要做的是替换提交按钮上的单击事件（如果有），并显示一个对话框，单击是，如果提交按钮已定义，则对话框应启动默认的onclick事件，如果没有应该发生默认事件（按钮提交表单），。submit（）函数在任何情况下对我都不起作用因为我还需要通过表单发送此按钮，如果没有单击按钮.submit（）发送表单数据没有提交数据。

Bellow代码有问题，警告（'xxx'）总是被调用，它不应该，并且单击是按钮警告和对话框创建再次调用，如果我删除警报按钮，我不能调用默认提交按钮事件（使用按钮提交表单）。

$('input.confirm').each(function(){
    var input = this;
    var dialog = document.createElement("div");
    $(dialog).html('<p>AREYOUSHURE</p>');
    $(input).click(function(event)
    {
        event.preventDefault();
        var buttons = {};
        buttons['NO'] = function() { $(this).dialog("close"); };
        buttons['YES'] = function() { $(input).trigger('click'); $(this).dialog("close"); };

        $(dialog).dialog(
        {
            autoOpen: false,
            width: 200,
            modal: true,
            resizable: false,
            buttons: buttons
        });
        $(dialog).dialog('open');
        return false;
    });
});

<form method="post" action="">
    <input type="hidden" value="1" name="eventId" />
    <input type="submit" value="Check" name="checkEvent" class="confirm" onclick="alert('xxx');" />
</form>

Answer 1

当您添加onclick事件时，它将独立于任何jquery运行。如果你正在使用jquery，那么不使用onclick是一种很好的做法。

更好的解决方案：

var buttons = {};
var dialog = document.createElement("div");
$(dialog).html('<p>AREYOUSHURE</p>');
$('.confirm').click(function(event){
    event.preventDefault();
    var input = $(this);
    buttons['NO'] = function() { $(this).dialog("close"); };
    buttons['YES'] = function() { $(input).trigger('click'); $(input).closest('form').submit(); $(this).dialog("close"); };

    $(dialog).dialog(
    {
        autoOpen: false,
        width: 200,
        modal: true,
        resizable: false,
        buttons: buttons
    });
    $(dialog).dialog('open');
    return false;
});

制作全球范围的按钮。然后，当您单击是时，只需提交表单

Answer 2

通过组合on()和off()方法（可用于jQuery 1.7+），可以从非默认处理程序触发默认处理程序。这个想法是：

使用调用on();

preventDefault()

如果点击确认按钮，请在调用off()之前使用trigger()删除自定义处理程序。

您的示例如下所示：

$(function() {
  var input = $('input.confirm');
  var dialog = document.createElement("div");

  $(dialog).html("<p>AREYOUSHURE</p>");
  $(dialog).dialog({
    autoOpen: false,
    width: 200,
    modal: true,
    resizable: false,
    buttons: {
      "NO": function() {
        $(this).dialog("close");
      },
      "YES": function() {
        $(this).dialog("close");
        $(input).off("click", askConfirmation);
        $(input).trigger("click");
      },
    }
  });

  var askConfirmation = function (event) {
    event.preventDefault();
    $(dialog).dialog("open");
  };

  $(input).on("click", askConfirmation);
});

单击 NO 按钮时，此代码将不执行任何操作，并且在单击 YES 按钮时将提交具有正确submit值的表单。

另请注意，对jQuery使用onclick属性可能会导致意外行为，即使您仅将其用于测试。我建议设置<form action="/some/unexistent/url">以检查是否触发了默认操作（如果已触发，那么您会看到404错误;否则您将保持在同一页面上。）

输入提交字段上的jquery事件

2 个答案: