`
笨笨的你
  • 浏览: 8692 次
  • 性别: 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之外啦。
分享到:
评论

相关推荐

    jQuery完整注册表单提交验证.zip

    "jQuery完整注册表单提交验证"是一个针对此需求的解决方案,它提供了全面的验证功能,确保用户输入的数据符合预期,同时减少了服务器端的压力。本文将深入探讨jQuery如何实现这一功能,以及如何将其应用于实际项目中...

    可预览删除的jQuery多图上传ajax提交.zip

    在IT领域,jQuery是一款广泛使用的...综上所述,这个压缩包提供了一个完整的基于jQuery的多图上传解决方案,结合了图片预览、删除和Ajax提交功能。开发者可以参考这个项目,学习如何在自己的应用中实现类似的功能。

    基于jQuery的表单验证解决方案.zip

    在这个“基于jQuery的表单验证解决方案”中,我们将探讨如何利用jQuery进行有效的前端表单验证。 首先,让我们了解jQuery的基本用法。jQuery通过选择器(如$("#elementId"))来定位DOM元素,然后可以使用各种方法...

    关于jquery validate plugin 指定需要验证对象解决方案

    《关于jQuery Validate Plugin指定需要验证对象的解决方案》 在Web开发中,表单验证是必不可少的一环,确保用户输入的数据符合预设的规则。jQuery Validate Plugin是一款强大的客户端表单验证插件,它使得这一过程...

    jQuery点击添加快捷留言表单代码.zip

    这个压缩包包含了一整套基于jQuery的解决方案,允许用户通过简单的点击操作来添加留言表单。下面我们将深入探讨jQuery库、jQuery代码实现、以及可能的二次修改方法。 首先,jQuery是一个轻量级的JavaScript库,它...

    jQuery UI Dialog控件中的表单无法正常提交的解决方法

    一种解决方案是利用jQuery UI Dialog的"open"事件。在"open"事件的回调函数中,我们可以动态地将Dialog生成的HTML元素移动回form元素内部。以下是一个具体的示例代码: ```javascript $("#dlg").dialog({ open: ...

    jQuery手机下拉框select

    总的来说,`jQuery手机下拉框select` 是通过jQuery Mobile库实现的一种优化移动端用户体验的解决方案。它提供了丰富的样式、交互和功能特性,帮助开发者创建出更符合移动设备需求的下拉菜单。通过理解和应用这些技术...

    jquery实例大全

    **jQuery实例大全** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。这个“jQuery实例大全”集合...无论你是初学者还是经验丰富的开发者,都能从中找到灵感和解决方案。

    简单jQuery加载等待转圈页面插件

    在网页开发中,用户体验至关重要,尤其是...总的来说,"简单jQuery加载等待转圈页面插件"是提升网页加载体验的实用工具,它通过jQuery的便利性和强大的DOM操作能力,为开发者提供了快速集成和定制加载提示的解决方案。

    jQuery UI的Dialog无法提交问题的解决方法

    总的来说,解决jQuery UI的Dialog控件中表单无法提交的问题,关键是要确保表单元素在Dialog初始化之后仍然位于form内。通过在合适的时机将Dialog的动态HTML元素移动到form内,或者在Dialog中使用IFRAME,都可以有效...

    jquery_dialog jquery_dialog jquery_dialog

    1. 提示信息:对于简单的消息提示,Dialog提供了一键式解决方案,如警告或确认消息: ```javascript $.prompt("This is a warning message!"); ``` 2. 表单提交:Dialog可以承载表单,提供用户输入验证和数据提交。...

    JQuery实战教程PPT

    12. **JSONP**:跨域数据获取的解决方案,jQuery提供了对JSONP的支持。 **五、插件开发与使用** 13. **jQuery插件开发**:了解如何编写自己的jQuery插件,扩展其功能,提高代码复用性。 14. **常见jQuery插件**:...

    jquery购物车前台模板

    总的来说,"jQuery购物车前台模板"是基于jQuery实现的前端交互框架,它结合了商品管理、用户交互和数据通信等多种技术,为电商网站的购物车功能提供了完整的解决方案。通过学习和使用这个模板,开发者可以深入理解...

    jQuery Mobile 表单

    jQuery Mobile 的表单组件提供了一套完整的解决方案,帮助开发者创建出符合移动设备特性的交互式表单。通过利用其数据增强、主题系统和事件处理,开发者可以轻松地构建美观且功能丰富的移动应用表单。在实际项目中,...

    网络收集100个常用的jquery特效和插件打包下载

    这些jQuery特效和插件涵盖了网页设计的各个方面,无论是基础功能增强还是复杂交互实现,都有对应的解决方案。学习和掌握这些特效和插件,将大大提高前端开发效率,创造出更富吸引力的网页应用。通过深入理解和实践...

    jQuery自定义标注图片代码.zip

    3. **动态DOM操作**:在自定义标注中,可能需要在图片上动态添加、删除或修改标注元素。jQuery提供了一系列方法,如`append()`、`remove()`和`html()`,用于在DOM树中进行此类操作。 4. **CSS样式控制**:标注的...

    50个jquery漂亮实例

    10. **兼容性处理**:jQuery致力于跨浏览器兼容性,实例中可能有针对不同浏览器的解决方案。 通过学习和实践这些实例,开发者不仅可以熟悉jQuery的基本用法,还能深入理解如何在实际项目中运用jQuery,提高开发效率...

    纯jquery二维码生成器

    总的来说,“纯jQuery二维码生成器”是现代Web开发中的一个实用工具,结合jQuery的便利性和二维码的高效信息传递,为开发者提供了灵活且高效的解决方案。通过深入理解jQuery和二维码生成库的使用,开发者可以轻松地...

Global site tag (gtag.js) - Google Analytics