努力良心自成就
jquery使用append方法添加子元素导致页面刷新的问题
今天帮同事分析一个页面问题：jquery通过append动态添加标签的时候，导致整个页面全部被刷新，最后的结果就是页面上没有看到新增的标签（通过debug模式，发现是新增成功了，只是页面刷新之后就没有了）。。代码如下：
&table id="one"&
&button id="btn"&新增&/button&
&script type="text/javascript"&
$(function () {
$("#btn").click(function () {
$("#one").append("&tr& " +
"&td&&input type='text' class='form-control'/&&/td&" +
"&td&&input type='text' class='form-control'/&&/td&" +
"&td&&input type='text' class='form-control'/&&/td&" +
"&td&&input type='text' class='form-control'/&&/td&" +
"&td&&input type='text' class='form-control'/&&/td&" +
&/script&分析过程：
1、一开始以为是append导致的页面刷新，所以为了排除这个可能性，单独写一个简单的demo，单独使用append添加标签。发现页面并没有刷新。所以排除是append导致页面刷新了。
2、那么能导致页面刷新的就是表单被提交了。发现使用的是&button&标签，外层有一个form标签。
点击button标签按钮导致form被提交了，这才是页面刷新的关键，所以将button修改为&span&标签就好了（这样就避免了form表单被提交了），修改后的代码如下：
&table id="one"&
&span id="btn"&新增&/span&
&script type="text/javascript"&
$(function () {
$("#btn").click(function () {
$("#one").append("&tr& " +
"&td&&input type='text' class='form-control'/&&/td&" +
"&td&&input type='text' class='form-control'/&&/td&" +
"&td&&input type='text' class='form-control'/&&/td&" +
"&td&&input type='text' class='form-control'/&&/td&" +
"&td&&input type='text' class='form-control'/&&/td&" +
以上代码是项目中的简写，有些样式等都被我省略了。
至于span和button样式问题，大家可以自行写css、或者使用类似bootstrap的css样式。
就是button导致的form被提交，导致页面刷新。将button换成不会导致form被提交的标签就行了，比如我换的是span。
append追加html代码标签后
css样式没生效
js同时没有生效
解决jQuery使用append添加的元素事件无效的方法
用Jquery动态append方式加入标签时Css样式丢失的解决方法
JqueryMobile 动态添加元素css丢失的终极解决办法
jquery追加元素的几种方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）
Jquery append方法使用中遇到问题记录
关于js动态添加的时候样式失效的问题
没有更多推荐了，其他回答(6)
..........你还是先弄清楚前端js运行时和后台输出的html是什么概念吧...
js生成的.当然用js获取.源代码只是后台输出的html.你还指望JS能改后端的代码吗..
园豆：26461
源码是后端服务器或静态页面一次拿到客户端的，所以你用JS改变的内容在源码里是看不到的，想看的办法是用IE8以上，或Chrome，按F12，DOM资源管理器，里面可以看到改变后的结果。
源码是你服务器返回的源码当然没有嘛，dom结构才有。chrome f12 elements
园豆：4710
源代码是不会显示浏览器编译之后的状态的 需要点击审查元素按钮 这个时候 才是编译之后的状态
上代码吧兄弟
浏览器 f12审查元素
NET高级QQ群： --欢迎大家加入讨论技术
清除回答草稿
&&&您需要以后才能回答，未注册用户请先。解决Jquery向页面append新元素之后事件的绑定问题
转载 &更新时间：日 10:12:31 & 投稿：hebedich
今天有get到一个新知识点，就是当我们向页面添加新的元素之后，加载之前的函数方法就对新元素失效了，下面我来说说如何解决这个问题的？
　　我先看jq api文档没有找到方法，无果只好到网上找些资料，果然找到live方法。
　　其实很简单：
　　1.这是项目要求达到的效果，当我没用live事件，只用了简单的hover事件时：hover事件没有加载进来，没有我想要的边框效果，效果图如下
　　/*经过用户技能标签增加样式*/
　　　　$(function(){　　　
　　　　　　$(".s-edited").hover(function(){　　
&& 　　　　　$(this).toggleClass("borderd");
　　　　　　})
　　　　})　　
　　　　2.当我用了live之后，效果达到了，如下图：
　　　　代码如下：
　　　　/*经过用户技能标签增加样式*/
　　　　$(".s-edited").live("hover",function(){
　　　　　　$(this).toggleClass("borderd");
　　　　})
　　　　我仔细的看了一下关于live的介绍，
　　　　给所有当前以及 将来 会匹配的元素绑定一个事件处理函数（比如hover事件）。也能绑定自定义事件。
　　　　PS：我是新手菜鸟，大神勿喷！
以上就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery 用append添加子节点以后无法使用事件_百度知道
jquery 用append添加子节点以后无法使用事件
$(function(){
$(&#btn1&).click(function (){
$(&ul&).append(&&li&&+$i+&&/li&&);
alert($(&ul li&).length);
$(&ul li&).dblclick(function (){
$(this).remove();
&input ...
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
$&(&ul&).delegate&(&li&,&&dblclick&,&function&(){&&&&$&(this).remove&();});或$&(&ul&li&).live&(&dblclick&,&function&(){&&&&$&(this).remove&();});
采纳率：71%
为您推荐：
其他类似问题
append的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。　　今天有get到一个新知识点，就是当我们向页面添加新的元素之后，加载之前的函数方法就对新元素失效了，下面我来说说如何解决这个问题的？
　　我先看jq api文档没有找到方法，无果只好到网上找些资料，果然找到live方法。
　　其实很简单：
　　1.这是项目要求达到的效果，当我没用live事件，只用了简单的hover事件时：hover事件没有加载进来，没有我想要的边框效果，效果图如下
　　/*经过用户技能标签增加样式*/ 　　　　$(function(){　　　
　　　　　　$(".s-edited").hover(function(){　　
& &　　　　　$(this).toggleClass("borderd");
　　　　　　})
　　　　})　　
　　　　2.当我用了live之后，效果达到了，如下图：
　　　　代码如下：
　　　　/*经过用户技能标签增加样式*/ 　　　　$(".s-edited").live("hover",function(){
　　　　　　$(this).toggleClass("borderd"); 　　　　})
　　　　我仔细的看了一下关于live的介绍，
　　　　给所有当前以及 将来 会匹配的元素绑定一个事件处理函数（比如hover事件）。也能绑定自定义事件。　　　　　　　　PS：我是新手菜鸟，大神勿喷！
阅读(...) 评论()}