我有一个非常奇怪的问题(至少对我来说)。
我动态创建文本框,效果很好。但问题是,当我尝试写入这些内容时,如果我检查 html 代码,我写入的值不会出现。我不知道为什么会发生这种情况,也不知道如何解决这个问题。
这是我的代码示例。
<ul class="ml4 js-sortable-buttons list flex flex-column list-reset" data-disabled="false" id="page-content">
<li class="p1 mb1 blue bg-white" id="id"><input type="text" class="textbox" /></li>
</ul>
<div class="center py2 ml4">
<div class="js-add-textbox-button button blue bg-white" >add textbox</div>
<div class="show_html_button blue bg-white">show html</div>
</div>
<!-- <script src="../src/html.sortable.js"></script> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="html.sortable.min.js"></script>
<script type="text/javascript">
sortable('.js-sortable-buttons', {
forcePlaceholderSize: true,
items: 'li',
placeholderClass: 'border border-white mb1'
});
// buttons to add items and reload the list
// separately to showcase issue without reload
document.querySelector('.js-add-textbox-button').addEventListener('click', function () {
doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white"><input type="text" class="textbox"></li>`, "text/html").body.firstChild;
document.querySelector('.js-sortable-buttons').appendChild(doc);
sortable('.js-sortable-buttons');
window.stop();
});
</script>
<script type="text/javascript">
$(".show_html_button").click(function () {
var optionTexts = $("#page-content").clone(true);
alert(optionTexts.html());
});
</script>
任何帮助将不胜感激。
javascript 不是这样工作的。当输入字段的值更改时,网页的 HTML 不会自动更新。
如果你想要这样的功能,你可以这样做:
$(function(){
$('.js-sortable-buttons').on('keyup change paste','input',function(){
$(this).attr('value', $(this).val());
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)