我使用Bootstrap 3模式。我有一个文本输入内的模态和一个链接时,点击将创建新的文本输入字段低于第一个最多4个领域。我的代码工作正常,它创建了更多的输入字段。
但是,当我关闭模式并再次打开它时,会有多个输入文本字段,这取决于我之前单击链接的次数。我不希望发生这种情况-当我关闭模态并再次打开它时,我希望只看到一个输入文本字段(初始状态),而不是看到模态中DOM的更改。这可能吗?
Link to my code
我使用Bootstrap 3模式。我有一个文本输入内的模态和一个链接时,点击将创建新的文本输入字段低于第一个最多4个领域。我的代码工作正常,它创建了更多的输入字段。
但是,当我关闭模式并再次打开它时,会有多个输入文本字段,这取决于我之前单击链接的次数。我不希望发生这种情况-当我关闭模态并再次打开它时,我希望只看到一个输入文本字段(初始状态),而不是看到模态中DOM的更改。这可能吗?
Link to my code
3条答案
按热度按时间a1o7rhls1#
您希望使用基于这里的引导JavaScript文档的hide.bs.modal事件
首先,我将为所有输入元素和新呈现的div元素添加一个类,clearAfterClose用于输入,hideAfterClose用于divelements。然后我将创建我的Jquery函数为:
这将在模态隐藏时触发,并使用类clearAfterClose清除所有输入元素,并使用类hideAfterClose隐藏所有div。我为演示here创建了一个codepen
wlp8pajw2#
它将一直在那里,因为你正在编辑HTML。在您刷新页面或自行设置之前,模态不会返回到其原始状态。只需清空容器,并在关闭模态时再次添加第一个输入。注意“$('div #myModal').on('hidden.bs. modal'”事件块上发生的事情。
你的JS(我对你的原始代码进行了一点重构)
您的HTML
5gfr0r5j3#
('#name of input field ').瓦尔('');