javascript - 对 Load() 内容运行验证

Question

嗨，这一切可能很容易修复，也许是因为我对 jQuery 的误解。

我正在构建一个文档中心，当用户单击不同的按钮时，它会使用 load() 将表单加载到页面中，然后该表单会使用 CSS 显示在屏幕中心。完成后，表单将通过 ajax 关闭表单提交。

我有封装在 $(function(){}) 中的函数；监听按钮点击并加载相关内容，但加载表单时，提交监听器不会拾取该表单。我假设因为生成 DOM 时未包含表单，这就是我的脚本无法读取它的原因

function window_form(form="") {
  $('#popup_bg').addClass('show').load('/ajax/'+form);
  $('.closeWindow').live('click', function(e){
    $('#popup_bg').removeClass('show');
    $( "section" ).remove( ".windowCard" );
  });
}

$(function(){
  // Submission listener
  $('form').on('submit', function(e) {
    e.preventDefault();
    ajax_submit($(this));
  });
  // check for window form button and load the form
  $(".windowForm").click(function(e) {
    e.preventDefault();
    window_form($(this).data("form"));
  });
});

因此，页面上的任何表单都可以正常工作，如果提交，则会发送到 ajax_submit()。那么有没有一种方法可以在加载完成后初始化表单，以便可以通过提交功能来获取它们。我一直在寻找 .live，但这不是被删除了吗。

我可以将我的脚本包含在所有可以工作的表单文件中，但看起来很老套并且加载多个 jquery session 。

Answer 1

如果您有动态内容，则应在加载内容时在内容上绑定(bind)事件。您可以尝试以下代码:

function window_form(form = '') {
    $('#popup_bg').addClass('show').load('/ajax/' + form);
    $('.closeWindow').live('click', function(e){
    $('#popup_bg').removeClass('show');
    $('section').remove('.windowCard');
  });
}

$(function(){
  // Submission listener
  $('form').on('submit', function(e) {
    e.preventDefault();
    ajax_submit($(this));
  });
  // check for window form button and load the form
  $('body').on('click', '.windowForm', function(e) {
    e.preventDefault();
    window_form($(this).data("form"));
  });
});

更新:我修改了示例以便更好地理解。这是您的 test.js 文件:

// ********************************************
// Global Varables
// ********************************************
var Window = $(window);
var TheDoc = $(document);
var ViewWidth = Window.width();
var Body = $("body");

// ********************************************
// SITE FUNCTIONS
// ********************************************
function window_form(form) {
    $('#popup_bg').addClass('show').load('/ajax/' + form, function () {
        $('form').validate();
    });
}

// ********************************************
// SITE INTERACTIONS
// ********************************************
$(function () {
    // Submission listener
    $('body').on('submit', 'form', function (e) {
        e.preventDefault();
        var $form = $(this);
        if ($form.valid()) {
            var ajaxData = new FormData($form.get(0));
            ajaxData.append('action', $form.attr("id"));
            console.log(ajaxData);
        }
    }).on('click', '.windowForm', function (e) {
        e.preventDefault();
        window_form($(this).data("form"));
    });
});