jQuery multi待办事项列表

Question

I am using jquery accordion, java script and html5, trying to make it so that each section is a lists name. Then within that section make so that you can add or remove from the list in that section. So you can see what I am doing here is my fiddle .

I think the problem is here:

function add_listitem(key,item)
{
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(item));
    li.setAttribute("data-key,key");
    var but = document.createElement('button');
    but.appendChild(document.createTextNode('Delete'));
    but.onclick = remove_item;
    li.appendChild(but);
    document.getElementById('todo_list').appendChild(li);
}

It was working as just a single to-do list. Now however I can not seem to get it to work. Maybe I'm just to tired. Any help is greatly appreciated.

Answer 1

Looks like you need to assign the functions to an object.

Here is a fiddle which attaches them to window (not good) which fires the event.

I suggest you create a javascript object you can call the functions on

CODE:

 $('#add').click(function () {
     var listnames = prompt("Please enter list name", "List 1");
     $('#accordion').append('<h3><a href="#">' + listnames + '</a></h3><div id="' + listnames + '"><input onkeypress="Javascript: if (event.keyCode==13) window.add_items();" type="text" id="new_item" class="todo-input" placeholder="Add to list"></div>');
     $("#accordion").accordion('destroy').accordion();
 });
 window.add_items = function add_items(){
     //alert(this.document.activeElement.parentNode.id);
     var new_item = this.document.activeElement;
     alert(new_item.value);
     var key = new date();