昨天写了一个页面,里面涉及到动态的创建和修改表单控件(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之外啦。
分享到:
相关推荐
jQuery动态添加删除编辑标签代码是一款自定义选项卡,添加选项卡,删除选项卡,编辑选项卡内容等。 jQuery动态添加删除编辑标签代码截图
下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文实例讲述了jQuery动态添加元素无法触发绑定事件的解决方法。分享给大家供大家参考,具体如下: 最近遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件。后来在网上查阅了一些资料...
jquery 动态添加控件
这是一款实用的jQuery动态添加移动列表插件,jQuery动态添加数据代码,jQuery动态数据代码。
主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列
jQuery动态添加节点循环流程图表代码
jquery动态添加表单
JQuery跨域访问解决方案 JQuery
动态添加删除分组插件, 给指定的用户,jQuery,bootstrap
当使用脚本动态添加元素xxx时,但事件失效,最后使用jquery中on方法解决脚本动态添加元素,需要的朋友可以参考下
文档中详细记录了添加 删除元素的两个函数,代码完整、准确,删除函数的方法可以根据用户的要求,删除指定行的数据元素
jQuery 动态添加或删除表格行特效,每点击一次添加,会添加一个表格单元格,点击删除会删掉所有行,基于jQuery插件完成,想研究的朋友下载一看。
实用的jquery添加删除元素,代码很简单,在这里记录下
两种jquery动态添加删除行方法 两种jquery动态添加删除行方法 两种jquery动态添加删除行方法
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。