0

我试图展示当你点击关闭按钮时你可以关闭的只读表单的等价物。当我逐步通过调试器时，似乎动态附加的元素被删除了，但随后它进入了 jQuery 文件，进入了某个方法，然后将其放回原样，然后再点击删除，我不明白为什么。

var array=TodoItem.all;
$(document).ready(function() {
    initNoComplete(array);
    sortIt(array);
    $("#add").on("click",function(e)
    {
        $("#itemHolder").append($('<div class="newItem notDue">&nbsp</div>'));    
    });
    $("select").change(function()
    {
        sortIt(array);
    });
    $("#isComplete").change(function()
    {
        if($("#isComplete").is(":checked"))
        {
            init(array);
        }
        else
        {
            initNoComplete(array);
        }
    });
});
function createEditForm(h,array,i)
{

    $(h).append('<div id="editToDo">\
        <form id="editForm">\
         </form>\
         </div>');
    $("#editForm").append("Title:");
    $("#editForm").append($('<input>',{name:'title',type:'text',value:array[i].title}));
    $("#editForm").append("<br>Due Date:");
    $("#editForm").append($('<input>',{name:'due_date',type:'text',value:array[i].due_date}));
    $("#editForm").append("<br>Complete:");
    $("#editForm").append($('<input>',{name:'complete',type:'checkbox',value:array[i].complete}));
    $("#editForm").append("<br>Priority:");
    $("#editForm").append($('<input>',{name:'title',type:'text',value:array[i].priority}));
    $("#editForm").append("<br>Project:");
    $("#editForm").append($('<input>',{name:'project',type:'text',value:array[i].project}));
    $("#editForm").append("<br>Note:");
    $("#editForm").append($('<textarea>',{class:"note",name:"note", rows:5, cols:30}));
    $('.note').append(array[i].note);
    $("#editForm").append('<button class="submit">Submit</button>');
    $("#editForm").append('<button class="close">Close</button>');
}
function showForm(h,array,i)
{
    $(h).append('<div id="showForm"></div>');
        $("#showForm").append("Title:");
        $("#showForm").append(array[i].title);
        $("#showForm").append("<br>Due Date:");
        $("#showForm").append(array[i].due_date);
        $("#showForm").append("<br>Complete:");
        $("#showForm").append("<input type=checkbox name='checked'>");
        $("#showForm").append("<br>Priority:");
        $("#showForm").append(array[i].priority);
        $("#showForm").append("<br>Project:");
        $("#showForm").append(array[i].project);
        $("#showForm").append("<br>Note:");
        $('#showForm').append("<textarea readonly>"+array[i].note+"</textarea>");
        $("#showForm").append('<div><button class="submit" id="edit">Edit</button></div>');
        $("#showForm").append('<div><button class="close">Close</button></div>');
        $("#showForm").append('<div class="clear"></div>');
        prepareChildListeners();
}
function prepareListeners()
{
    $(".submit").on("click",function(e)
    {
        if(validateForm())
        {
            var title=document.forms["newForm"]["title"].value;
            var note=document.forms["newForm"]["note"].value;
            var project=document.forms["newForm"]["project"].value; 
            var due_date=document.forms["newForm"]["due_date"].value;
            var complete=$("#complete").prop('checked') ? 1 : 0 ;
            var priority=document.forms["newForm"]["priority"].value;
            var newToDo = new TodoItem(title, note, project, due_date, priority, complete);
            var test=document.getElementById('newForm');
            test.reset();
            $(".newToDo").toggle();
            sortIt(array);
        }
        e.preventDefault();
    });
    $(".newItem").click(function()
    {
        $('#showForm').remove();
        var id = $(this).attr("id");
        showForm(this,array,id); 
    });

}
function prepareChildListeners()
{
    $(".close").click(function(e)
    {
        $(this).parent().parent().remove();
        e.preventDefault();

    });
    $("#edit").click(function(e)
    {
        item = $('#edit').parent().parent().parent();
        $('#edit').parent().parent().remove();
        createEditForm($(item),array,$(item).attr('id'));
    });
}

html:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Todo Item Viewer</title>
    <link rel="stylesheet" type="text/css" href="TodoViewer.css">
    <script src="/uncSemester7/comp426/a3/jquery-1.10.2.js"></script>
    <script src="TodoItem.js"></script>
    <script src="TodoViewer.js"></script>
</head>

<body>
    <div id="list">
        <div class="button">
        Sort By:
            <select class="dropdown">
                <option value="Title">Title</option>
                <option value="Priority">Priority</option>
                <option value="DueDate">Due Date</option>
            </select>
        </div>
        <div class="button">
            <button id="add">Add ToDo Item</button>
        </div>
        <div class="button" >
            Show Completed:<input type="checkbox" id="isComplete">
        </div>  
        <div class="clear"></div>
    <div id="itemHolder"></div>
    </div>
</body>
</html>
4

0 回答 0