Question

我想为各个添加/删除按钮上的每个点击操作添加/删除div。但出于某种原因，当我点击按钮时，没有任何反应，只是在URL中添加了一个＃标签，它会将我带回到页面顶部。

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

注意=我正在使用基础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;
    });
});

Answer 2

您不能将内联代码放在script标记中，该标记也具有src属性..

使用一个标记包含jQuery，一个包含代码..

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

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

2 个答案: