javascript - 动态添加的输入字段立即消失

Question

我正在尝试编写一个 jQuery 代码片段，在其中我可以使用 jQuery appendTo() 函数在单击“添加图像”按钮(下面的代码)时动态添加输入字段。但是，每次我单击该按钮时，文本框都会出现，然后立即消失。我注意到其他人也遇到了这个问题，但无法找到该问题的正确解决方案。有人可以帮我解决这个问题吗？

...
<div class="row">
    <div class="span4" id="images-div">
        <input type="text" name="txt-image[]" class="span4 txt-input-field">
    </div>
    <div class="span1">
        <button class="btn" id="btn-add-image">Add Image</button>
    </div>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script>
    $(document).ready(function(){
        $('#btn-add-image').click(function() {
            $('<input type="text" name="txt-image[]" class="span4 txt-input-field">').appendTo('#images-div');
        });
    });
</script>
...

Answer 1

Answer provided by DEREK N :

<小时/>

使用preventDefault()函数解决问题，如下图

<script>
    $(document).ready(function(){
        $('#btn-add-image').click(function(event) {
            event.preventDefault();
            $('<input type="text" name="txt-image[]" class="span4 txt-input-field">').appendTo('#images-div');
        });
    });
</script>