Good all the time of day!
There is a ToDo list on jQuery. There are elements in it, but they are static (you can only change and add new ones by editing the code). Naturally, you need to make the function of adding new elements.
I wrote code copying certain lines of code one after another using .after() , but the problem is that it added the list item itself to the top of the list, and the buttons down, and then again.
I also tried using .load() implement something like this, but this did not work either.
JS code snippet:
<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 code snippet (part where the list itself is implemented):
<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> Actually, the question is: how do I implement copying a list item, starting from <div class="list"> and ending with the same </div> ?
(I wrote comments in English, if someone does not understand, I will translate with joy :)).
The version of the project itself: strasbourgmeetings.org/ccc
I would be grateful for the help!
