[jQuery] JQuery Move Element to a New parent
Hey. Essentially I have two lists one id with available one id with
selected. When you click on an element within the available (a
checkbox) it executes a function
$(".availableProfile").click(function(event) {
elementID = event.target.id;
elementGroup = elementID.split("__");
$(this).removeClass("availableProfile");
$(this).addClass("selectedProfile");
newBox = "<li>" + $(this).parent().html() + "</li>";
$(this).parent().remove()
$("#" + elementGroup[0] + "_selected").append(newBox);
$(this).parent().css({backgroundColor: '#ff0'});
});
The part that fails is the last part. Even though i've deleted and re-
created it, JQuery won't pick up on the element any longer. Below is
the initial HTML
<ul id="ELM_available" style="list-style-type: none; list-style-image:
none; list-style-position: outside;">
<li>
<input type="checkbox"
class="availableProfile" value="ELM_External_Learner"
id="ELM__ELM_External_Learner" name="ELM_checked"/>
ELM External Learner
</li>
</ul>
<ul id="ELM_selected"><li>
</ul>
Here is what occurs after clicking on the checkbox.
<ul id="ELM_available" style="list-style-type: none; list-style-image:
none; list-style-position: outside;">
</ul>
<ul id="ELM_selected"><li>
<input type="checkbox" class="selectedProfile"
value="ELM_External_Learner" id="ELM__ELM_External_Learner"
name="ELM_checked"/>
ELM External Learner
</li></ul>
Am I doing osmething wrong or do I need to reinit?
Thanks