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会话。

Answer 1

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

How can perform a validation JQuery script after that a div containing the input field of a form is loaded?

https://forum.jquery.com/topic/validate-problem-dealing-with-load-function

https://forum.jquery.com/topic/validating-after-load

Answer 2

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

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

Answer 3

嗨亚历克斯所以这里是文件

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

要加载的表单first_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>

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

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

在Load（）内容

3 个答案: