jQuery's Stylish-Select plugin doesn't work on elements created after page load

Question

I've been striving to use Stylish Select Box with elements created after page load without success. In order to understand the issue, you'll need to re-produce it first. I know the following might seem a bit annoying but please continue reading if if you have 5 minutes of spare time.

Alternatively, you may obtain a completed example here to see the issue directly.

First, you'll need a <select> element. Now bind jquery.stylish-select.js to your <select> element using something like $('select').sSelect(); after that the script hides the <select> element and creates a set of DIVs underneath it. Now your page should look like this :

<select style="display:none;">
    <option>1</option>
    <option>2</option>
</select>
<div class=newListSelected>
    <!-- Some other stuff(not important). -->
</div>

Now add another <select> element to the same page with something like $('body').append('<select><option>1</option><option>2</option></select>')​ and use $(.newListSelected).remove(); to delete the DIVs it created for the pervious ` option. Hope I'm sill clear enough.

After that you should have the following on the page :

<select style="display:none;">
    <option>1</option>
    <option>2</option>
</select>
<select>
    <option>1</option>
    <option>2</option>
</select>

Last, just call $('select').sSelect(); once more. It should create DIVs under both of your <select> elements. Now here's the problem, The first select box represented by the DIVs doesn't behave properly.

Alternatively, you may obtain a completed example here to see the issue directly.

Normally when you choose an option from the select box represented by the DIVs, it should update the original <select> element's selectedIndex (DOM property) to the corresponding index of the chosen option(0 for first option, 1 for the second.. etc). But if you look closely you'll see its changing selectedIndex value to -1 for any option.

As I'm really new to Javascript I really have no idea why its behaving like this. What I could only probably think of would be due to the first element being binded to $('select').sSelect; twice, thus causing DOM problems.

Answer 1

i think you cant just simply delete the div. why can you not undo the sSelect thing? i'm sure there is a destroy option or remove or whatever, so remove the sSelect properly, then try again :)

Answer 2

hi,

u have to call the sSelect function once more after creating the elements

$(document).ready(function(){
    $('select').sSelect();
});

$('.add').click(function() {
    $('body').append('<select><option>1</option><option>2</option></select>')
   $('select').sSelect();
});

$('.bind').click(function() {
    $('.newListSelected').remove();
    $('select').sSelect();
});

Answer 3

Here is what your JS should look like:

$(document).ready(function() {
    $('select').sSelect();

    $('.add').click(function() {
        var newSelect =$('<select><option>1</option><option>2</option></select>').appendTo('body');
        $(newSelect).sSelect();
    });

    $('.bind').click(function() {
        $('.newListSelected').remove();
    });
});​

The trick is to use appendTo instead of append. That will return the newly created select, so you can use .sSelect() on it.