Javascript 对Load（）内容运行验证

大家好，这一切可能真的很容易修复，可能是因为我对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（）。那么，有没有一种方法可以在加载完成后初始化表单，这样就可以使用submit函数提取表单。我在找一个活的，但这不是被移除了吗

---

我可以将我的脚本包含在所有的表单文件中，这些文件都可以正常工作，但是看起来很粗糙，并且加载了多个jquery会话。

这些搜索结果可能会对您有所帮助

---

这些搜索结果可能会对您有所帮助

---

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

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"));
    });
});

---

若你们有动态内容，你们应该在内容加载时绑定事件。您可以尝试以下代码：

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"));
    });
});

---

嗨，亚历克斯，这是文件

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

function ajax_submit(form) {
  var $form          = form;
  $form.on( 'submit', function(e) {
    e.preventDefault();
    if($form.valid()) {
      var ajaxData  = new FormData($form.get(0));
      ajaxData.append('action', $form.attr("id"));
      console.log(ajaxData);
    }
  });
}


// ********************************************
// SITE INTERACTIONS
// ********************************************
$(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"));
  });
});

要首先加载的表单。\u case.php

<?php require_once( '../../../includes/initialise.php' ); ?>

<section class="card windowCard">
  <header>
    <span class="icon closeWindow">x</span>
  </header>
  <div class="ajaxReply"></div>
  <h2>Enter The IPS Case Code</h2>
  <p>Please enter the IPS case cade as found on your creditors letter. This case will then be added to your account.</p>
    <form name="login" id="attachCase" class="form" action="process/cases.php" method="post" data-type="json" >
        <fieldset>
            <legend>Case Code Format <strong>ABCD01A</strong></legend>
            <p class="formRow">
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="0" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="0" />
        <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
            </p>
            <p class="formRow">
                <button type="submit" name="submit" class="blueBtn iconBtn" data-icons="s">Add Case</button>
            </p>
        </fieldset>
    <div class="working">
      <div class="loader"></div>
    </div>
    </form>
</section>

x
输入IPS案例代码
请输入债权人信函中的IPS案例编号。此案例将被添加到您的帐户中

案例代码格式ABCD01A



添加案例

然后在index.php中有一个按钮加载此表单

<div class="widget col-3 last">
                    <button class="windowForm blueBtn" data-form="forms/first_case.php">New Proxy Form</button>
                </div>

新的代理表格

你好，Alex，以下是文件

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

function ajax_submit(form) {
  var $form          = form;
  $form.on( 'submit', function(e) {
    e.preventDefault();
    if($form.valid()) {
      var ajaxData  = new FormData($form.get(0));
      ajaxData.append('action', $form.attr("id"));
      console.log(ajaxData);
    }
  });
}


// ********************************************
// SITE INTERACTIONS
// ********************************************
$(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"));
  });
});

要首先加载的表单。\u case.php

<?php require_once( '../../../includes/initialise.php' ); ?>

<section class="card windowCard">
  <header>
    <span class="icon closeWindow">x</span>
  </header>
  <div class="ajaxReply"></div>
  <h2>Enter The IPS Case Code</h2>
  <p>Please enter the IPS case cade as found on your creditors letter. This case will then be added to your account.</p>
    <form name="login" id="attachCase" class="form" action="process/cases.php" method="post" data-type="json" >
        <fieldset>
            <legend>Case Code Format <strong>ABCD01A</strong></legend>
            <p class="formRow">
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="0" />
                <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="0" />
        <input type="text" name="code[]" id="" aria-describedby="error" class="input code" maxlength="1" placeholder="A" />
            </p>
            <p class="formRow">
                <button type="submit" name="submit" class="blueBtn iconBtn" data-icons="s">Add Case</button>
            </p>
        </fieldset>
    <div class="working">
      <div class="loader"></div>
    </div>
    </form>
</section>

x
输入IPS案例代码
请输入债权人信函中的IPS案例编号。此案例将被添加到您的帐户中

案例代码格式ABCD01A



添加案例

然后在index.php中有一个按钮加载此表单

<div class="widget col-3 last">
                    <button class="windowForm blueBtn" data-form="forms/first_case.php">New Proxy Form</button>
                </div>

新的代理表格

尝试使用

.on（'click'，function（）…）

而不是

。单击（function…

“我正在寻找一个.live，但这不是被删除了吗”-是；但是解释了如何替换它。谢谢Alex，我用你的建议替换了它，但是没有做任何区别，使用

.on（'click'，function（）…）

而不是

。click（function…

“我正在寻找一个.live，但这不是被删除了吗”-是的；但是解释了如何替换它。谢谢Alex，我用你的建议替换了它，但没有做任何改变。Chi Alex，我尝试了你的解决方案，但仍然不起作用。如果我用正确的方法来做，我想知道。对不起，我看不到完整的代码。请发布一些将加载的示例html内容hi alex我在上面添加了文件哦，好的，很好：）hi alex我尝试了你的解决方案，但仍然不起作用，如果我用正确的方法进行操作，我会犹豫抱歉，我看不到完整的代码。请发布一些将加载的示例html内容嗨alex我在上面添加了文件哦，好的，很好：）