js在一个div后面使用after方法动态生成的输入框怎样在页面关闭时保存下来？

Posted 2023-04-20

先说需求吧：在新增页面点击按钮增加许多个输入框，这些输入框就是点击按钮动态生成的，在输入框内填写sql语句，点击保存按钮将输入框和输入框中的内容保存下来。当点击修改（不是新增） 页面时带出来之前动态生成的多个输入框和内容（新增和修改共享一个弹窗）（动态生成输入框我是在div后面用after方法拼接的html字符串，）再说我遇到的问题：新增动态生成的输入框无法保存，（很明显再次打开时，因为html中并没有这些输入框的html代码），所以要怎样解决？

如果不涉及后台的话：你可以在你弹出新增页面（最外层）添加一个div

如：<div id ="content_div"></div> 将整个弹出页面包含当中，

然后在页面任意位置，设一个用来保存html的div

<div id="copy_div" style="display:none"></div>

2. 然后在点击确定按钮后，

保存好你新增后的html   $("#copy_div").html($("#content_div").html())；

3.在你点击修改的时候保将存号的html内容 取出来 $("#content_div").html($("#copy_div").html());

这样就行啦。

参考技术A 大概思路是：你在新增或修改时 点击保存 把数据通过form表单或者ajax 发送给后台 后台将数据保存到数据库 当重新打开修改页面时 输入框肯定是直接写好的 ，只是通过判断是否有内容来显示或隐藏输入框，如果数据，那么输入框就显示并将数据渲染出来。 参考技术B 页面样式截图

为啥我用JS动态生成的DIV模块，里面的点击方法不生效？

默认显示的两条，click时间可以生效，但是一动态添加DIV后，同样的class，ID，点击后就没反应了。这是什么原因呢？

<script type="text/javascript"> $(function() //点击更多加载 $("#click-more2").click(function() add(); ); //关注控制 $(".gz").click(function() if ($(this).text() == "关注") $(this).text('取消关注'); else $(this).text('关注'); ); function add() for (var i = 0; i < 5; i++) //每次加载3条数据 $(".sg").append("<div class='sg-1'><div class='sg-txt demo21'><img src='img/2.png' class='Vimg'></div><div class='sg-txt demo21 demo23'>虫儿飞,鱼儿游</div><div class='sg-txt demo21'><img src='img/woman.png' class='Vimg2'></div><div class='sg-txt demo18 demo24'><a href='javascript:void(0)' class='gz' id='gz' >取消关注</a></div></div>"); ); </script>

不生效主要是因为：

动态生成的dom之前的绑定事件都失效了

动态追加的元素之前的都有事件都已经没了

解决方法：

给父级绑定事件，采用事件委托的方式

dom动态生成后，再次获取和重新绑定事件即可

参考技术A 要再绑定一次函数,每次运行绑定函数,都会找到对应元素来绑定事件,
但是,此时,动态元素尚未加载,无法绑定追问

我把之前 关注控制那部分代码复制了一遍，放在这个里面，是这样吗？

追答

全部append再一次绑定就行了,你试试,
不行发源文件来看看

追问

我这样弄了一次后，刚开始默认的几条，点击效果有反映，然后加载更多出来的点击也有反映，但是只要加载更多几条出来，之前的老的那几条，又点不动了。。。