`
笨笨的你
  • 浏览: 8596 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

jquery动态添加元素无法提交解决方案

阅读更多
       昨天写了一个页面,里面涉及到动态的创建和修改表单控件(form controls),用到的修改添加元素的方式为jquery方法为append,和replaceWith方法,凡是原有的控件后台都可以获取到值,凡是动态改变的元素,都无法获取值,这些控件当然都包含了name属性,但无论如何检查后台就是获取不到值。
     提交方法用的jquery的post方法,表单表单元素通过serialize()方法进行串行化
   $.post($('#form1').attr("action"), $('#form1').serialize(),
	function(data) {
	     alert(data);
	});

将表单的值串行化后提交,alert($('#form1').serialize())后发现,修改的元素并未串行化。以为是serialize()方法中有问题,就读了其方法源码,并未发现明显问题;其后感觉可能是replaceWith的方法的问题,读过其源码后,亦没有发现明显问题。
     后来通过firebug去比较原生的表单元素和动态添加的表单元素后,发现了控件的jquery对象都有一个属性form,原生控件的form属性为form1,而动态添加的为null。问题找到了,原来表单form1不能找到我添加的元素,也是就说新添加的元素不在form这颗DOM树上。自然无法串行化,于是就更换了串行化时的选择器,没有通过form1,而是通过页面这个整体DOM
    $.post($('#form1').attr("action"), $(':input').serialize(),
	function(data) {
		alert(data);
	});

来串行化控件,验证后结果正确,貌似问题解决了。
        当然依据这种思路还有一种解决办法,就是给每一个动态就该的元素,添加form属性,
$(element).attr("form",form's Id)

这样也可以解决问题。但总感觉不太对,晚上下班回来继续查,终于找到了端倪。
        通过一个朋友的一篇文章http://blog.csdn.net/liu510817387/article/details/7267733我检查了下自己的<form>和<table>标签的位置,发现果然有问题
<table>
	<form id="form1"action="<c:url value='/gameentity/edit?'/>mentity_id=<c:out value='${mentity_id}'/>"method="post">
	<tr class="title">……
原来是这个问题,修改过之后,完美解决问题。但是对于form和table这两个标签的位置为什么会导致新添加无form属性这个问题,依旧还不太理解。不过通过firebug可以看到,
<table>
<form id="form1" method="post" action="/city-mis/gameentity/edit"></form>
<tbody>
</table>
即form标签已经缩为一团啦,也许导致新添加的元素,位于form之外啦。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics