Question

我有一个非常奇怪的问题（至少对我而言）。我动态创建文本框，它工作正常。但问题是当我尝试写入那些，如果我检查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>

非常感谢任何帮助。

Answer 1

这不是javascript的工作方式。当输入字段的值发生变化时，网页的HTML不会自动更新。

如果您想要这样的功能，可以这样做：

＆＃13;

$(function(){
  $('.js-sortable-buttons').on('keyup change paste','input',function(){
    $(this).attr('value', $(this).val());
  });
});

＆＃13;

Answer 2

您缺少对html5Sortable的引用。 https://cdnjs.com/libraries/html5sortable

        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();
        });

        $(".show_html_button").click(function () {
            var optionTexts = $("#page-content").clone(true);
            alert(optionTexts.html());
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5sortable/0.6.1/html.sortable.min.js"></script>

<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>

HTML输入没有更新值

2 个答案: