Dropdown Boxes cloned with JQuery don't retain the behaviour of the original
What I am trying to do is clone 3 drop-down boxes and add them beneath the original set.
At the moment it works but the clones do not maintain the functionaility of the original set.
What the originals do is c开发者_运维技巧heck the selected value of the first drop-down box in order to populate the drop-down lists for the other two.
Fiddle is below but adding the clones doesn't seem to work for some reason I can't figure out, it works on the page I am working on.
http://jsfiddle.net/pV6x5/6/
Thanks,
Martin
UPDATE
updated the fiddle, it was missing the advancedsearch
div: http://jsfiddle.net/pV6x5/7/
Use jQuery live to keep the event's bound to the new elements. With live it binds the event to all present and future elements where just defining a handler for change will only bind for the current elements (you can also just reattach the events every time you create an element but why do it when live takes care of it for you)
$tags.live("change",function(){ /* your stuff here */});
UPDATE Here is the change function and if block:
$(document).ready(function()
{
$tags = $("select[name='tags']");
$tags.live("change",function()
{
$operands = $(this).parent().find("select[name='operands']");
$values = $(this).parent().find("select[name='values']");
if ($(this).val() == "agent")
{
$(this).parent().find("select[name='operands'] option").remove();
$("<option>=</option>").appendTo($operands);
$("<option>!=</option>").appendTo($operands);
$(this).parent().find("select[name='values'] option").remove();
$("<option>excel</option>").appendTo($values);
$("<option>msword</option>").appendTo($values);
$("<option>ppt</option>").appendTo($values);
$("<option>pdf</option>").appendTo($values);
$("<option>image</option>").appendTo($values);
$("<option>txt</option>").appendTo($values);
$("<option>html</option>").appendTo($values);
$("<option>csv</option>").appendTo($values);
$("<option>ooxml</option>").appendTo($values);
$("<option>flash</option>").appendTo($values);
$("<option>wmf</option>").appendTo($values);
}
I believe you need to use the .live() bind, so that it attaches the events to the objects made "in the future." http://api.jquery.com/live/
So rather than .change() you need .live('change')
精彩评论