Question

我正在尝试触发一个函数，该函数是show.bs.modal上的表单提交功能，但它仅触发第一次。

我的模态：

列出的每个项目都是一个表格。我为此的jQuery代码是：

$('#edit_modal').on('shown.bs.modal', function (event) {
    console.log("shown");
    $('#edit_form').submit(function (event) {
        event.preventDefault();
        var url = $(this).attr('action');
        var data = $(this).serialize();
        $.post(url, data, function (data) {
            $('#edbtn').attr({
                class: 'btn btn-success',
                disabled: 'true',
                value: data
            });
        });

    });
});

在控制台中，我只能在第一次打开日志时看到“显示”日志。而且只有第一次单击按钮保存时，它才能正常工作，但是第二次重定向到actionurl.php页面，这意味着由于未显示该功能，因此这次不会触发此功能。

注意：我已经尝试过$（this）.modal（）。hide（）。show（）;但这不是重新显示模态或类似的东西。

Answer 1

如果您的模式是动态创建的（如果它在关闭后从dom中删除并在打开时追加），则您需要使用其他事件构造：

$(document).on('shown.bs.modal', '#edit_modal', function (event) { ... })

与提交事件相同：

$(document).on('submit', '#edit_form', function(event) { ... })

Answer 2

每次显示模式时，您都将设置一个新的提交侦听器。为防止将多个侦听器附加到单个表单：

 $('#edit_form').off("submit").on("submit",function (event){
  //blah
  })

以及旧版的jQuery：

 $('#edit_form').unbind("submit").bind("submit",function (event){
  //blah
  })

如果表单在打开模式之前已存在，则更好的方法是将侦听器设置为一次且不在模式事件之外。

Answer 3

如果模态内部的表单不是动态添加的，则在打开模态时，只需将绑定从模态打开事件中删除就可以了：

$('#edit_form').submit(function(event) {
  event.preventDefault();
  var url = $(this).attr('action');
  var data = $(this).serialize();
  $.post(url, data, function(data) {
    $('#edbtn').attr({
      class: 'btn btn-success',
      disabled: 'true',
      value: data
    });
  });
});

如果在模式打开时添加了表单，则需要绑定现有元素，例如<body>：

$('body').on('submit', '#edit_form', function(event){
  event.preventDefault();
  var url = $(this).attr('action');
  var data = $(this).serialize();
  $.post(url, data, function(data) {
    $('#edbtn').attr({
      class: 'btn btn-success',
      disabled: 'true',
      value: data
    });
  });
});

Bootstrap模态第二次不触发jQuery函数

3 个答案: