0

Доброго всем времени суток!

Есть ToDo список на jQuery. В нем есть элементы, но они статические (изменять и добавлять новые можно только через редактирование кода). Естественно, что нужно сделать функцию добавления новых элементов.

Написал код, копирующий определенные строки кода друг за другом, используя .after(), но проблема в том, что он добавлял сам элемент списка вверх списка, а кнопки - вниз, причем через раз.

Пробовал так же при помощи .load() реализовать что-то подобное, однако это тоже не вышло.

Фрагмент кода JS:

<script>
// Waiting for the document to load
    $(document).ready(function() {
// Wanted to create a dynamic item list, that's why I used this variable. I thought it would
// generate unique IDs (there was 'id++' somewhere in the function I already deleted).
        var id = 1;

// This is going to be used as an action for 'Add Item' button. (It is not a button, actually, it is just <span> with cursor: pointer. Using <a> causes page reload);
        $('.add').click(function() {
            $('#item'+id).after(function(i) { // '#item'+id should be something like this in the code: #item2, #item3, etc.

            })
        })

// 'Done' button
        $('#done1').click(function() {
            console.log('# "Done" button pressed');
            $('#list1').css('background-color','#89f49a').css('border','1px solid #16bf31').css('text-decoration','line-through').css('color','#817f7f').css('font-weight','normal');
            console.log('# Item doned successfully');
        });

// 'Undone' button (is gonna be renamed to 'Reset');
        $('#undone1').click(function() {
            console.log('# "Undone" button pressed');
            $('#list1').css('background-color','').css('border','').css('text-decoration','').css('color','').css('font-weight','normal');
        });

// 'Working' button
        $('#working1').click(function() {
            $('#list1').css('background-color','#edc951').css('border','1px solid #dda119').css('font-weight','bold').css('color','#000').css('text-decoration','none');
        });

// 'Cancel' button
        $('#cancel1').click(function() {
            $('#list1').css('background-color','#ff8c8c').css('border','1px solid #ea2c2c').css('font-weight','normal').css('text-decoration','line-through').css('color','#f00');
        });
// 'Delete' button
        $('#del1').click(function() {
            $('div#dlist1').remove();
            $('li#action1').remove();
        });
    });
</script>

Фрагмент кода на HTML (часть, где реализованы сам список):

<div class="list">
                    <ul id="sortable">
                        <div class="list-item" id="item1"><div class="spacer1" id="spacer1"></div>
                        <div class="l-element" id="dlist1"><li id="list1" class="ui-widget ui-state-default">Create add feature</div>
                        <li id="action1" class="action"><input type="button" value="Done" class="done" id="done1"><input type="button" value="Undone" class="undone" id="undone1"><input type="button" value="Working" class="working" id="working1"><input type="button" value="Cancel" class="cancel" id="cancel1"><span id="del1" class="delete">Delete</span></li>
                        <div class="spacer"></div></div>
                    </ul>
                <div>

Собственно, вопрос следующий: как мне реализовать копирование элемента списка, начиная от <div class="list"> и заканчивая его же </div>?

(комменты писал на английском, если кому непонятно - переведу с радостью :)).

Версия самого проекта: strasbourgmeetings.org/ccc

Буду благодарен за помощь!

3 ответа 3

1

доброго времени суток. функцией .clone()

1
  • Точно! Забыл совсем про .clone(). Ступил немного Но это, к сожалению, не конечная проблема - теперь для созданных элементов не работаю кнопки. Логично, ведь, они привязаны к id. запись типа $('#undone1').click(function() { console.log('# "Undone" button pressed'); $('#list' + id).css('background-color','').css('border','').css('text-decoration','').css('color','').css('font-weight','normal'); }); проблему не решает. Как я полагаю , это из-за того, что он добавляет конечный id. Но суть в том, что даже в самом последнем добавленном элементе это не работает.
    – Max Krizh
    22 июл 2013 в 20:57
1

Потому что у вас функция click(), которая находится в document ready. Попробуйте через live, или bind.

1
  • 1
    Вы хотели сказать, через .on() и .delegate(), верно? 23 июл 2013 в 6:47
0

Я бы на Вашем месте посмотрел в сторону AngularJS. Слишком уж Ваша задача похожа на типовые ангулярские.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.