如果在当前html中提交使用ajax Response附加的表单，javascript验证将失败

为我的英语道歉。我的Java脚本验证失败，这会阻止表单在字段为空时上载，事实上，如果在用于添加部分的HTML中已经存在from，则它可以工作

若我附加相同的表单，调用相同的Java脚本验证函数，其中包含相同的字段，唯一的区别是我使用来自某个PHP页面add_selection_AJAX.PHP的AJAX响应来附加此表单，因为这次我需要在该表单上从数据库加载值，我需要使用AJAX来附加它，这是我项目的限制我必须以那种方式工作

这是函数调用AJAX：

function editSelectionOptn(sel_optn_id)
    {
        $.ajax({
          type: 'POST',
          url: 'add_selection_ajax.php',
          data: { sel_optn_id:sel_optn_id},
          success:function(data){
            // alert(data);
             $("#edit").append(data);
             document.getElementById('edit').style.display = 'block';
             document.getElementById('exposeMask').style.display = 'block';

           }
        });
    }

Java脚本验证：

function validateInputOptn()
{

    alert(document.sel_optn.image_thumb.value);
    alert(document.sel_optn.image_thumb.value);
    if (document.sel_optn.image_thumb.value==null || document.sel_optn.image_thumb.value=="")
    {
        alert("Please select thumbnail image.");
        document.sel_optn.image_thumb.focus();
        return false;
    }
    if (document.sel_optn.image.value==null || document.sel_optn.image.value=="")
    {
        alert("Please select image.");
        document.sel_optn.image.focus();
        return false;
    }
    if (document.sel_optn.selection_optn_title.value==null || document.sel_optn.selection_optn_title.value=="")
    {
        alert("Please enter subcatagory title.");
        document.sel_optn.selection_optn_title.focus();
        return false;
    }


}

添加_selection_ajax.php：

if(isset($_POST['sel_optn_id']) && is_numeric($_POST['sel_optn_id']))
    {
        $table=" tbl_selection_options";
                $optn_sel_id=$_POST['sel_optn_id'];
                $db->selectQuery($table,"where id='".$_POST['sel_optn_id']."'","id, option_title, option_img, selection_id");
                $value=mysql_fetch_assoc($db->result);
?>
                <h3>Edit Selection</h3>

                <!-- input form. you can press enter too -->
                <form action="" name="sel_optn" id="sel_optn" method="post"  onsubmit="return validateInputOptn();" enctype="multipart/form-data">
                    <input type="hidden" name="id" id="id" value="<?=$_POST['sel_optn_id']?>" />
                    <input type="hidden" name="selection_id" id="selection_id" value="<?=$value['selection_id']?>" />
                    <input type="hidden" name="page_start" value="<?php if(isset($_GET['start'])) echo $_GET['start']; ?>" />
                    <p>Thumbnail (100 x 100) <input type="file" name="image_thumb" id="image_thumb" value="" ></button></p>
                    <p>Large Image (750 x 515) <input type="file" name="image" id="image" value=""> Browse </button></p>
                    <p>Title: <input type="text" name="selection_optn_title" id="selection_optn_title" value="<?php if(isset($value['option_title'])) echo $value['option_title']; ?>" class="overlay-input" />
                    <button type="button" class="close" onClick="cancle()"> Cancel </button>
                    <button type="submit"> Save </button></p>
                </form>
<?php
    }

这是包含表单添加和编辑部分的HTML页面。添加零件验证可以正常工作。它还调用与edit调用的Java脚本函数相同的Java脚本函数

编辑_selection.php

<div class="modal" id="add">
  <h3>Add Selection</h3>


  <form action="" name="sel_optn" id="sel_optn" method="post" onsubmit="return validateInputOptn();"  enctype="multipart/form-data">
    <input type="hidden" name="selection_id" id="selection_id" value="<?php if(isset($_GET['id'])) echo $_GET['id']; ?>" />
    <p>Thumbnail (100 x 100) <input type="file" name="image_thumb" id="image_thumb" value="" ></button></p>
    <p>Large Image (750 x 515) <input type="file" name="image" id="image" value=""> </button></p>
    <p>Title:  <input type="text" name="selection_optn_title" id="selection_optn_title" value="" class="overlay-input" />
    <button type="button" class="close"> Cancel </button>
    <button type="submit"> Save </button></p>

  </form>


</div>


<div class="modal" id="edit">



</div>

只有在单击页面上的“添加”或“编辑”按钮后，“添加”和“编辑”部分才会在页面加载时保持隐藏状态

甚至我也使用jquery的.live函数，因为新版本的jquery不推荐使用它，所以我不得不使用.on函数，但.on函数也不起作用。

---

请帮帮我。

因为您使用ajax创建新元素，jQuery不知道这些元素，因为他正在应用$document.ready（页面加载时准备就绪）

如果希望jQuery验证脚本正常工作，则需要在DOM中范围更大、更高、尚未更改的元素，然后在DOM中查找新创建的元素并对其应用验证模式