Question

我正在为我们学院的一个部门创建一个简单的基于Web的课程安排程序，目前正在开发UI。我用jQuery UI的手风琴和可排序的扩展来创建它。我设置了它，以便您可以添加/删除课程并添加/删除术语所有连接的可排序有序列表的术语。

我遇到的问题是当一个术语已经是html页面的一部分时，一切都运行得很完美。但是，当您使用jQuery添加术语OL时，可以添加课程但不删除。当您尝试删除课程时，您会收到Object Expected错误。即使您从另一个术语拖动现有的li元素，当您尝试从新术语中删除它们时仍会出现“对象预期”错误。

我的想法是1）我需要更新新术语或2）我没有正确初始化新术语。下面是我的javascript。

如果需要，我可以共享html代码，但它只是一个带有调用javascript函数的按钮的表单。

// Remove selected courses from term
function remCourse(term) {
var termDiv = '#term' + term + 'classes';

    $(termDiv).children().children().children(":checked").each(function() {
      $(this).parent().parent().remove();
    });
}

// Add course to term
function addCourse(term) {
var termDiv = '#term' + term + 'classes';

var course = $(termDiv).children().length + 1;

$(termDiv).append('<li class="ui-state-active"><span class="courseAction"><input name="' + term + 'c' + course + 'box" type="checkbox" /> Dept & Num: <input type="text" id="' + term + 'c' + course + 'num" name="' + term + 'c' + course + 'num" size="8" maxlength="6" /> Credits: <input type="text" id="' + term + 'c' + course + 'cred" name="' + term + 'c' + course + 'cred" size="4" maxlength="3" /> # of Meetings: <input type="text" id="' + term + 'c' + course + 'meet" name="' + term + 'c' + course + 'meet" size="8" maxlength="6" /> Title: <input type="text" id="' + term + 'c' + course + 'num" name="' + term + 'c' + course + 'num" size="20" maxlength="50" /> </span></li>'
);
}

// Remove selected terms
function remTerm() {
  $("#terms").children().children().children(":checked").each(function() {
    $(this).parent().parent().remove();
  });
}

// Add new term
function addTerm(term) {
var termDiv = '#term' + term + 'classes';

$("#terms").append('<div id="term' + term + '" class="connectedTerms"> <h4 class="ui-widget-header"><input class="tbox" name="t' + term + 'box" type="checkbox" />Term ' + term + '<input id="addCourse' + term + '" type="button" onclick="addCourse(this.id.substring(9))" value="Add Course" class="ui-button-text-only" /> <input id="remCourse' + term + '" type="button" onclick="removeCourse(this.id.substring(9))" value="Remove Selected Courses" class="ui-button-text-only" /> </h4> <ol id="term' + term + 'classes" class="connectedSortable"> <li class="ui-state-active"><span class="courseAction"> <input name="' + term + 'c1box" type="checkbox" /> Dept & Num: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="8" maxlength="6" /> Credits: <input type="text" id="' + term + 'c1cred" name="' + term + 'c1cred" size="4" maxlength="3" /> # of Meetings: <input type="text" id="' + term + 'c1meet" name="' + term + 'c1meet" size="8" maxlength="6" /> Title: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="20" maxlength="50" /> </span></li> </ol> </div>'
);

$(termDiv).sortable({
    connectWith: ".connectedSortable",
    dropOnEmpty: true,
    placeholder: "ui-state-highlight"
}).disableSelection();

    // I tried doing a refresh below, but it just gave me an error
    // so I commented it out.
//$(termDiv).sortable('refresh');

}

Answer 1

我发现这对我来说是一个简单的错字。在addTerm（）javascript代码中，我使用Remove Selected Courses按钮调用removeTerm（）函数而不是remTerm（）函数。叹息我会不会停止拼写错误？

更正的代码是：

// Add new term
function addTerm(term) {
var termDiv = '#term' + term + 'classes';

$("#terms").append('<div id="term' + term + '" class="connectedTerms"> <h4 class="ui-widget-header"><input class="tbox" name="t' + term + 'box" type="checkbox" />Term ' + term + '<input id="addCourse' + term + '" type="button" onclick="addCourse(this.id.substring(9))" value="Add Course" class="ui-button-text-only" /> <input id="remCourse' + term + '" type="button" onclick="remCourse(this.id.substring(9))" value="Remove Selected Courses" class="ui-button-text-only" /> </h4> <ol id="term' + term + 'classes" class="connectedSortable"> <li class="ui-state-active"><span class="courseAction"> <input name="' + term + 'c1box" type="checkbox" /> Dept & Num: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="8" maxlength="6" /> Credits: <input type="text" id="' + term + 'c1cred" name="' + term + 'c1cred" size="4" maxlength="3" /> # of Meetings: <input type="text" id="' + term + 'c1meet" name="' + term + 'c1meet" size="8" maxlength="6" /> Title: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="20" maxlength="50" /> </span></li> </ol> </div>'
);

$(termDiv).sortable({
    connectWith: ".connectedSortable",
    dropOnEmpty: true,
    placeholder: "ui-state-highlight"
}).disableSelection();

}

jQuery sortable：在动态添加的OL中使用LI时的对象预期错误

1 个答案: