cloned elements cannot be selected after jquery customSelect plugin installation

Question

I am in a bit of a pickle with this form and i would really appreciate some help.

After installing the customSelect() jquery plugin, i was no longer able to select the cloned select box elements on my form.

For an example, go to...

http:// gator1016.hostgator.com /~tamarind/index.php/en/book-now.html

Click on the second slide >> click on the "add a package" button >> try and change one of the cloned select box values.

Does anyone have any suggestions as to why this is? I'm under a bit of pressure to get this fixed.

Thanks in advance.

Answer 1

You are running .customSelect() in a seperate script tags previous to the rest of your form script. So here is the current order of events:

1. customSelect takes all given selects and appends a customizable <span> next to each (this is what you styled to achieve the desired look). It also attaches event listeners to those very spans so they can properly interact with their corresponding select element.
2. A user clicks "add another package", you clone the entire block of form elements including the custom spans that the plugin appended.

It is important to note that in doing this, you are not copying the event listeners, just the elements. Right now, even if you ran customSelect again upon cloning, you would likely have some kind of issue because the original span would still be there.

The solution to your problem would be to keep a reference to a clone of your form block that has not already had customSelect applied. Then each time you insert a new form block, you need to apply customSelect to the "vanilla" form block.

Here is a reduced example for you

HTML

<form action="" id="myForm">
    <div id="formBlock">
        <select><option>one</option><option>two</option></select>
    </div>
</form>

<button id="addNew">add new</button>

jQuery

//do this first:
var formBlock = $('#formBlock').clone();

//now .customSelect();
$('#formBlock select').customSelect();


$('#addNew').click(function(e){
    e.preventDefault();
    var newFormBlock = formBlock.clone().appendTo('#myForm'); //clone the reference to un-modified form block!!!
    newFormBlock.attr({
        id:'' //dont want duplicate id's
    });
    newFormBlock.find('select').customSelect();
});

Demo: http://jsfiddle.net/adamco/ZZGJZ/1/