【发布时间】：2012-06-21 09:18:53
【问题描述】：
好吧，这可能有点长，所以请坚持下去！
我在 HTML 中有一个时间表网格，显示时段/天，每个单元格都设置为“可选”类。
然后我使用 jQuery UI Selectable 让我只选择设置为可选择的单元格（以停止选择表头）。当您完成选择后，javascript 会将隐藏字段添加到表单中，以供 POST 获取。
这是错误出现的地方。
如果您拖动多个单元格并单击 BOOK，它会正确传递它们（选择 3 个单元格并通过隐藏输入传递）。如果您拖动多个单元格，然后单选一个不同的单元格并单击“预订”，它似乎会选择之前的多项选择。
现在更奇怪了，它不会在 Firefox 或我的 IE9 副本中执行此操作，但在其他 IE9 副本上确实会导致此错误。由于我们无法真正使用 FF 或其他任何东西的教育环境，我需要它在 IE8/9/10 上工作。
这是我拥有的 JavaScript 位......
诚然，它们可能看起来很乱，我以前从未真正使用过 JavaScript，但所选函数按我的意愿工作。似乎是未选择的功能引起了问题。
$( "#selectable" ).selectable({
filter: ".selectable",
selected: function() {
var count = 0;
$( ".ui-selected", this ).each(function() {
var data = $(this).data();
$(data).each(function(key, value){
var room_id = document.createElement("input");
room_id.setAttribute("type", "hidden");
room_id.setAttribute("name", "booking["+count+"][room]");
room_id.setAttribute("value", data.room);
room_id.setAttribute("class", "js-added");
document.getElementById("add").appendChild(room_id);
var date_id = document.createElement("input");
date_id.setAttribute("type", "hidden");
date_id.setAttribute("name", "booking["+count+"][date]");
date_id.setAttribute("value", data.date);
date_id.setAttribute("class", "js-added");
document.getElementById("add").appendChild(date_id);
var period_id = document.createElement("input");
period_id.setAttribute("type", "hidden");
period_id.setAttribute("name", "booking["+count+"][period]");
period_id.setAttribute("value", data.period);
period_id.setAttribute("class", "js-added");
document.getElementById("add").appendChild(period_id);
var day_id = document.createElement("input");
day_id.setAttribute("type", "hidden");
day_id.setAttribute("name", "booking["+count+"][day]");
day_id.setAttribute("value", data.day);
day_id.setAttribute("class", "js-added");
document.getElementById("add").appendChild(day_id);
var bookable_id = document.createElement("input");
bookable_id.setAttribute("type", "hidden");
bookable_id.setAttribute("name", "booking["+count+"][bookable]");
bookable_id.setAttribute("value", data.bookable);
bookable_id.setAttribute("class", "js-added");
document.getElementById("add").appendChild(bookable_id);
var bookable_id_delete = document.createElement("input");
bookable_id_delete.setAttribute("type", "hidden");
bookable_id_delete.setAttribute("name", "booking["+count+"][bookable]");
bookable_id_delete.setAttribute("value", data.bookable);
bookable_id_delete.setAttribute("class", "js-added");
document.getElementById("delete").appendChild(bookable_id_delete);
var booking_id_delete = document.createElement("input");
booking_id_delete.setAttribute("type", "hidden");
booking_id_delete.setAttribute("name", "booking["+count+"][booking_id]");
booking_id_delete.setAttribute("value", data.bookingid);
booking_id_delete.setAttribute("class", "js-added");
document.getElementById("delete").appendChild(booking_id_delete);
var bookable_id_edit = document.createElement("input");
bookable_id_edit.setAttribute("type", "hidden");
bookable_id_edit.setAttribute("name", "booking["+count+"][bookable]");
bookable_id_edit.setAttribute("value", data.bookable);
bookable_id_edit.setAttribute("class", "js-added");
document.getElementById("edit").appendChild(bookable_id_edit);
var booking_id_edit = document.createElement("input");
booking_id_edit.setAttribute("type", "hidden");
booking_id_edit.setAttribute("name", "booking["+count+"][booking_id]");
booking_id_edit.setAttribute("value", data.bookingid);
booking_id_edit.setAttribute("class", "js-added");
document.getElementById("edit").appendChild(booking_id_edit);
count = count + 1;
});
});
},
unselected: (function(){
$('div').removeClass('ui-selected');
$(".js-added").remove();
})
});
如果需要页面中的任何其他代码，请告诉我。
只是为了略过它，如果我拖动 Mon-P1 / Mon-P2 / Mon-P3 / Mon-P4 并单击 BOOK，它显示它们是正确的。如果我拖动相同的 4，然后单选 Tue-P1（应该取消选择所有其余部分并选择它），它会给我：
周二-P1 / 周一-P2 / 周一-P3 / 周一-P4
就好像它只取消了第一个元素，而不是其余的。是否需要类似$(".ui-selected").each() 的函数来遍历所有条目？
【问题讨论】：
-
在花了一天的大部分时间试图找出原因之后，它“可能”与 IE 策略有关。我已经在不属于我们域的机器上进行了测试，它们都可以工作，IE8 和 9 ....在我们域上的机器上只有 IE8/9 会导致问题，所以很可能它不会是编码问题，更多是域问题
标签： jquery jquery-ui jquery-ui-selectable