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. Слишком уж Ваша задача похожа на типовые ангулярские.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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