Jquery表单在div内时不起作用答案

【问题标题】：Jquery form not working when inside a divJquery表单在div内时不起作用
【发布时间】：2012-01-12 05:05:52
【问题描述】：

我有一个将数据发送到 php 文件的简单表单，该文件使用表单的数据更新数据库。当在单击href链接的页面中加载表单时，表单可以正常工作，但是当在div中使用jquery load（）加载（此页面加载到嵌套在另一个页面中的div中）时，表单不再发送数据，刷新文本输入或保持焦点。我已经尝试过“提交”、“实时”和“实时查询”，但在该 div 中似乎都不起作用。

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

$('.linkpage').live('click', function(e) {           
    var url = $(this).attr('href');
    $('#main').load(url);
    e.preventDefault();
});

$("form#DataToDB").livequery(function() {
var User = $('#User').attr('value');
var Message = $('#Message').attr('value');
        $.ajax({ 
        type: "POST",  
        url: "updateDB.php",
        data: "User="+ escape(User) +"& Message="+ escape(Message),
        dataType: "html",
        scriptCharset: "utf-8",
        success: function() {
        alert("Message sent");
        }
        });
$("#Message").attr("value", "");
$('input#Message').focus();
return false;
});

});
</script>
</head>

<body>

<div id="menu">
<a href="Page1.php" class="linkpage">Page1</a>
<a href="Page2.php" class="linkpage">Page2</a>
</div>

<div id="main">
</div>

</body>

这是包含表单的页面（Page1.php 或 Page2.php），嵌套在上一页的“主”div 中：

<form id="DataToDB" name="DataToDB">
<input type="hidden" name="User" id="User">
<input type="text" name="Message" id="Message">
<input type="submit" name="Send" value="Send">
</form>

请问jquery脚本哪里出错了？

提前致谢

【问题讨论】：

您的意思是省略结束表单标记</form>？
不，这是一个错字，我已经更正了。谢谢你提醒我。

标签： jquery forms html

【解决方案1】：

原来有一个不相关的 HTML“错误”导致表单无法提交，即修复它后，初始代码和建议都可以工作。

【讨论】：

【解决方案2】：

试试这个代码：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"              type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {

$("#DataToDB").submit(function() {
var User = $('#User').attr('value');
var Message = $('#Message').attr('value');
    $.ajax({ 
    type: "POST",  
    url: "updateDB.php",
    data: "User="+ escape(User) +"& Message="+ escape(Message),
    dataType: "html",
    scriptCharset: "utf-8",
    success: function() {
    alert("Message sent");
    }
    });
$("#Message").attr("value", "");
$('input#Message').focus();
return false;
});

});
</script>
</head>

<body>

<div id="menu">
<a href="Page1.php" class="linkpage">Page1</a>
<a href="Page2.php" class="linkpage">Page2</a>
</div>

<div id="main">
<form id="DataToDB" name="DataToDB">
    <input type="hidden" name="User" id="User">
    <input type="text" name="Message" id="Message">
    <input type="submit" name="Send" value="Send">
</form>        
</div>

</body>

啊……很简单。将其插入您的 Page1.php Page2.php

<form id="DataToDB" name="DataToDB">
<input type="hidden" name="User" id="User">
<input type="text" name="Message" id="Message">
<input type="submit" name="Send" value="Send">
</form>

<script type="text/javascript">

$("#DataToDB").submit(function() {                          
var User = $('#User').attr('value');
var Message = $('#Message').attr('value');

$.ajax({ 
    type: "POST",  
    url: "updateDB.php",
    data: "User="+ escape(User) +"& Message="+ escape(Message),
    dataType: "html",
    scriptCharset: "utf-8",
    success: function() {
    alert("Message sent");
    }
    });
$("#Message").attr("value", "");
$('input#Message').focus();
return false;
});

</script>

【讨论】：

代码有效，但我需要将主 div 中的内容加载到该 div 内的另一个页面上。 Page1.php 和 Page2.php 将包含表单。我更新了代码，以便清楚我需要做什么。

【解决方案3】：

首先，您有一个未封闭的表格。将</form> 放在表单末尾DataToDB。

<form id="DataToDB" name="DataToDB">
<input type="hidden" name="User" id="User">
<input type="text" name="Message" id="Message">
<input type="submit" name="Send" value="Send">
</form>

其次，尝试使用.submit函数：

$("#DataToDB").submit(function() {

当您点击提交按钮时，您会看到警报。

【讨论】：

我已经尝试过 .submit;它在 div 外部时完美运行，但在使用 jquery load() 将表单加载到 div 本身之后，当它在 div 内部时就不再工作了。