IE6 & 7 bug with clone and/or appending
- $(".multipleSelect option").live("click", function() {
- var thisId = $(this).attr("id").split("-");
- if($(this).parent().hasClass("add-" + thisId[1])) {
- if(!$(this).hasClass("disabled")) {
- var optionClone = $(this).clone().attr("id", "remove-" + thisId[1] + "-" + thisId[2]);
- $(this).addClass("disabled");
- if($(this).hasClass("all")) {
- $(".multipleSelect.remove-" + thisId[1]).find("option").remove();
- $(".multipleSelect.add-" + thisId[1]).find("option").removeClass("disabled");
- }
- else {
- $(".multipleSelect.remove-" + thisId[1]).find(".all").remove();
- }
- $(".multipleSelect.remove-" + thisId[1]).append(optionClone);
- }
- }
- else {
- $(".multipleSelect.add-" + thisId[1]).find("#add-" + thisId[1] + "-" + thisId[2]).removeClass("disabled");
- $(this).remove();
- }
- return false;
- });
HTML:
- <select size="4" multiple="multiple" name="addPerson" class="multipleSelect add-event">
<option value="9" id="add-event-9">Name 1</option>
<option value="10" id="add-event-10">Name 2</option>
<option value="0" class="all" id="add-event-all">All</option>
</select>
<select size="0" multiple="multiple" name="addedPeople" class="multipleSelect remove-event">
<option value="0" class="all" id="add-event-all">All</option>
</select>
Javascript is in the document.ready. This works well in FF, Safari etc. but on IE 6 or 7 it does nothing. Tried replacing the live() with click(), but that did not help either. Any advice?