javascript - 如何使用 jQuery 正确添加和删除 div 标签？

Question

我想为相应添加/删除按钮上的每个点击操作添加/删除一个 div。但出于某种原因，当我单击按钮时，除了在 URL 中添加了一个主题标签之外什么也没有发生，它使我返回到页面顶部。

我不确定发生了什么。这是我的代码/标记的样子:

注意=我使用的是 foundation 5(不确定这是否重要)

Javascript/jQuery:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

        $(".add").live('click', function() {
            var linehtml = $('.line').html();
            var total = $('.line').length;
            var dele = (total - 1);
            $('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
            return false;
        });

        $(".del").live('click', function() {
            var linecont = $("#linecont");
            var total = linecont.find('.line').length;
            var dele = (total - 1);
            if(total === 1) {
                return false;
            }
            $('.line').eq(dele).remove();
            return false;
        });

   </script>

HTML:

<div class="row">
        <div class="large-2 columns">
            <a href="#" class="button add">Add Line</a>
        </div>

        <div class="large-10 columns">
            <a href="#" class="button del">Delete Line</a>
        </div>
    </div>  


<div id="linecont">
        <div class="line">
            <div class="row">
                <div class="large-3 columns">
                    <label>Status:</label>
                        <select>
                            <option value="New">New</option>
                            <option value="Changed">Changed</option>
                        </select>
                </div>

                <div class="large-3 columns">
                    <label>Product:</label>
                        <select>
                            <option value="Mobile">Mobile</option>
                            <option value="Social">Social</option>
                            <option value="Online">Social</option>
                        </select>
                </div>

                <div class="large-3 columns">
                    <label>Targeting Info:</label>
                        <input type="text" placeholder="Type Target Info here">
                </div>

                <div class="large-3 columns">
                    <label>Model:</label>
                        <select>
                            <option value="Mobile">CPC</option>
                            <option value="CPI">CPI</option>
                            <option value="CPM">CPM</option>
                            <option value="CPA">CPA</option>
                            <option value="CPD">CPD</option>
                            <option value="OTHER">Other</option>
                        </select>
                </div>    
            </div>
        </div>
    </div>

Answer 1

您必须等待 DOM 准备就绪。使用 jQuery(document).ready

$(document).ready(function() {
   $(".add").live('click', function() {
        var linehtml = $('.line').html();
        var total = $('.line').length;
        var dele = (total - 1);
        $('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
        return false;
    });

    $(".del").live('click', function() {
        var linecont = $("#linecont");
        var total = linecont.find('.line').length;
        var dele = (total - 1);
        if(total === 1) {
            return false;
        }
        $('.line').eq(dele).remove();
        return false;
    });
});