CODEWITHSUNDEEP
javascriptjqueryhtmlclone
martincarlin87
martincarlin87

Reputation: 11042

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 check 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/

Upvotes: 1

Views: 726

Answers (2)

scrappedcola
scrappedcola

Reputation: 10572

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);
}

Upvotes: 3

whoughton
whoughton

Reputation: 1385

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')

Upvotes: 1

Related Questions