代码之家 › 专栏 › 技术社区 › leora Matt Lacey

通过jquery添加后未显示的表单元素

forms jquery

-1

leora Matt Lacey · 技术社区 · 14 年前

在jquery方法(在按钮的click事件上)中,我有以下代码:

    $(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是空的(因为没有form元素)

以下是完全单击事件:

$(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' />");

    });
});

(});

1 回复 | 直到 14 年前

Guffa 14 年前

如果要将表单添加到其他表单中,则这是无效的。浏览器将尝试更正代码(根据浏览器的不同,使用不同的方法),一种方法是删除表单标记。

如果要在单击按钮时执行某些操作,则必须设置 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>