Question

我有一个表单，我希望每次单击一个按钮时附加一个整个div。代码可以工作，但几秒钟后，附加的div会自动消失。没有任何错误。

我正在使用jQuery 2.1.3。这是我在JS Fiddle的代码：

https://jsfiddle.net/sathyabaman/jgdLtu4d/

我的代码：

    <form method="POST" id="form_property" enctype="multipart/form-data">
        <div class="row">
            <div class="span4" id="image">
                 <h3><strong>4.</strong> <span>Add Images to your Property (Maximum : 6 Images)</span></h3>

                <div id="clone_image" class="fileupload fileupload-new ">
                    <label class="control-label">Image file</label>
                    <div class="input-append">
                        <div class="uneditable-input"> <i class="icon-file fileupload-exists"></i>
     <span class="fileupload-preview"></span>

                        </div> <span class="btn btn-file">
                                            <span class="fileupload-new">Select file</span>
     <span class="fileupload-exists">Change</span>

                        <input type="file" name="files1" accept="image/*" />
                        </span>
                    </div>
                </div>
            </div>
            <!-- /.span4 -->
        </div>
        <!-- /.row -->
        <br/> <a id="another_image" class="btn btn-primary btn-small list-your-property" href="">Add Another Image</a>
        <br/>
        <br/>
        <input type="submit" name="submit" value=" Save images " class="btn btn-primary btn-large" style="float: left; width: 370px; height: 50px; margin-top: 10px">
    </form>

jquery的

        $(document).ready(function(){


            var count = 2;
            $('#another_image').click (function(){
                var clonedEl = $('#clone_image').first().clone()
                clonedEl.find(':file').attr('name','files'+count)
                if(count < 7){
                    if(count == 6){ $('#another_image').hide();}
                    $(clonedEl).appendTo("#image");
                count++;
                }
            });
            });

谢谢..

Answer 1

您需要阻止锚点击的默认操作，即导航到目标页面。

由于您指定了一个空的href，因此会重新加载相同的页面，这就是为什么您可以看到新元素，然后它似乎正在消失。

$(document).ready(function () {

    var count = 2;
    $('#another_image').click(function (e) {
        //e.preventDefault()
        var clonedEl = $('#clone_image').first().clone()
        clonedEl.find(':file').attr('name', 'files' + count)
        if (count < 7) {
            if (count == 6) {
                $('#another_image').hide();
            }
            $(clonedEl).appendTo("#image");
            count++;
        }
    });
});

演示：Fiddle

将div添加到表单会自动消失

1 个答案: