Как правильно добавлять и удалять теги div с помощью jQuery?

0

Я хочу добавить/удалить 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>
  • 2
    Где add и del в HTML размещен?
  • 0
    @PSL - только что сделал редактирование. Это там сейчас.
Показать ещё 11 комментариев

2 ответа

2
Лучший ответ

Вы должны ждать, пока 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;
    });
});
  • 0
    Я добавил $ (документ) .ready () .... все еще не работает.
  • 0
    Неважно, это работает!
Показать ещё 1 комментарий
2

вы ставите встроенный код в тег script который также имеет атрибут src.

Используйте один тег, чтобы включить jQuery и один для кода yor.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
   //your code here..
</script>
  • 0
    +1 ты понял ....
  • 0
    Хороший улов! Но, вздох , все еще не работает.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню