Question

在jquery方法中（在按钮的单击事件上）我有以下代码：

    $(selector).html("<form action='/Tracker/CopyFood' method='post'><input type='hidden' name='Id' value=" + id + "><input class='very-small-input' type='text' name='Quantity' value='1' /> for <select name='Date'><option value='Today'>Today</option><option value='Yesterday'>Yesterday</option></select><select name='Meal'><option value='Breakfast'>Breakfast</option><option value='Lunch'>Lunch</option><option value='Dinner'>Dinner</option><option value='Evening Snack'>Evening Snack</option></select><input type='button' class='submitCopyFood' value='Add'> or <div style='display:inline' class='CancelCopy'>Cancel</div></form> ");

它似乎在屏幕上工作，但按钮单击“submitCopyFood”事件正在解雇，但它没有提交表单。当我点击Firefox中的“查看选择源”时，我看到了问题。我只看到了这一点：

   <input name="Id" value="128" type="hidden"><input class="very-small-input" name="Quantity" value="1" type="text"> for <select name="Date"><option value="Today">Today</option><option value="Yesterday">Yesterday</option></select><select name="Meal"><option value="Breakfast">Breakfast</option><option value="Lunch">Lunch</option><option value="Dinner">Dinner</option><option value="Evening Snack">Evening Snack</option></select><input class="submitCopyFood" value="Add" type="button">  or <div style="display: inline;" class="CancelCopy">Cancel</div>

就像我从未在任何地方添加过表格一样。有什么理由我没看到：

<form action='/Tracker/CopyFood' method='post'>

或

</form>

在所选源代码内的源代码中。我需要做些什么特别的事吗？

更新

这是按钮点击事件。为了清楚起见，这个事件发生了很好的事情，但这一行在下面失败了：

var myForm = parentDiv.children('form');

因为myForm为空（因为没有表单元素）

以下是完整点击事件：

$(document).ready(function() {
    $('.submitCopyFood').live('click', function() {

    debugger;

    var parentDiv = $(this).parent('.copyFoodInstance');
    var myForm = parentDiv.children('form');

    $.post(myForm.attr('action'), myForm.serialize(), function(data) {
        debugger;
        parentDiv.attr("fromInner", "1");
        parentDiv.attr("myset", "0");
        parentDiv.html("<img  BORDER=0 src='../../images/copy1.png' />");

    });
});

}）;

Answer 1

如果您要在其他表单中添加表单，则无效。浏览器将尝试更正代码（取决于浏览器的不同方式），一种方法是删除表单标记。

如果您希望按钮在单击时执行某些操作，则必须为其设置onclick事件。如果您希望按钮提交表单，则应使用带type="submit"的输入。

更新

您真的确实确定您尝试添加表单的元素周围没有表单吗？我可以通过在添加表单的元素周围放置一个表单来轻松复制确切的行为。如果外部表格不存在，表格会添加得很好，并在查看选择来源时显示。

parent方法只有一个级别，因此parentDiv变量是一个零元素的jQuery对象，因为按钮的父元素是表单。您可能希望使用parents或closest方法来查找元素。

工作示例：

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.1.js"></script>

<script type="text/javascript">

$(function(){

  var id = 'asdf';
  $('.copyFoodInstance').html("<form action='/Tracker/CopyFood' method='post'><input type='hidden' name='Id' value=" + id + "><input class='very-small-input' type='text' name='Quantity' value='1' /> for <select name='Date'><option value='Today'>Today</option><option value='Yesterday'>Yesterday</option></select><select name='Meal'><option value='Breakfast'>Breakfast</option><option value='Lunch'>Lunch</option><option value='Dinner'>Dinner</option><option value='Evening Snack'>Evening Snack</option></select><input type='button' class='submitCopyFood' value='Add'> or <div style='display:inline' class='CancelCopy'>Cancel</div></form> ");

  $('.submitCopyFood').live('click', function() {

    var parentDiv = $(this).closest('.copyFoodInstance');
    var myForm = parentDiv.children('form');

    alert(parentDiv.length); // shows 1
    alert(myForm.length); // shows 1

  });

});

</script>

</head>
<body>

<div class="copyFoodInstance"></div>

</body>
</html>

通过jquery添加后，表单元素不显示

更新

1 个答案:

更新