JQuery process cloned objects

Question

Hi again folks, Quick question please. How do you process JQuery clones objects?

Simple example:

<div class="hello">
<select name="products[]">
<?php foreach ($pageposts as $post):
<option value="'.$post->ID.'">'.$post->post_title.'</option>
endforeach;?>
</select>
<input type="text" name="try[]">
<br/>
</div>
<form>
<div id="goodbye"></div>
<input type="button" id="rp" value="add">
</form>

This JQuery (below) creates a "clone/s" of class 'hello' inside the .goodbye div which is inside a form.

$j=jQuery.noConflict();
$j(document).ready(function() {
$j('#rp').click(function(){ 
var str = $j(this).parent('form').serialize();
$j('.hello').clone().removeClass('hello').appendTo('#goodbye');
alert(str);
});
});

What I need to do is process the "cloned" select/inputs placed inside the form. The alert is there so I can see when (which I don't) get values to pass.

Thanks in advance

Answer 1

The problem is the ordering here, these two lines are reversed:

var str = $j(this).parent('form').serialize();
$j('.hello').clone().removeClass('hello').appendTo('#goodbye');

You're serializing the <form> before adding to it, just swap it around like this:

$j=jQuery.noConflict();
$j(document).ready(function() {
    $j('#rp').click(function(){ 
        $j('.hello').clone().removeClass('hello').appendTo('#goodbye');
        var str = $j(this).parent('form').serialize();
        alert(str);
    });
});​

You can see a working demo here