Databases
StackOverflow2013
Postsdbo
POjQuery's Stylish-Select plugin doesn't work on elements created after page load
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery's Stylish-Select plugin doesn't work on elements created after page load
    text
    copied!<p>I've been striving to use <a href="http://www.prismstudio.co.uk/2009/05/jquery-plugin-stylish-select-unobstrusive-select-box-replacement/" rel="nofollow noreferrer"><code>Stylish Select Box</code></a> 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.</p> <p><strong>Alternatively, you may obtain a completed example <a href="http://jsfiddle.net/XssbX/1/" rel="nofollow noreferrer">here</a> to see the issue directly.</strong></p> <p>First, you'll need a <code>&lt;select&gt;</code> element. Now bind <a href="http://github.com/sko77sun/Stylish-Select/blob/master/jquery.stylish-select.js" rel="nofollow noreferrer"><code>jquery.stylish-select.js</code></a> to your <code>&lt;select&gt;</code> element using something like <code>$('select').sSelect();</code> after that the script hides the <code>&lt;select&gt;</code> element and creates a set of DIVs underneath it. Now your page should look like this :</p> <pre><code>&lt;select style="display:none;"&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;/select&gt; &lt;div class=newListSelected&gt; &lt;!-- Some other stuff(not important). --&gt; &lt;/div&gt; </code></pre> <p>Now add another <code>&lt;select&gt;</code> element to the same page with something like <code>$('body').append('&lt;select&gt;&lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;/select&gt;')​</code> and use <code>$(.newListSelected).remove();</code> to delete the DIVs it created for the pervious ` option. Hope I'm sill clear enough.</p> <p>After that you should have the following on the page :</p> <pre><code>&lt;select style="display:none;"&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;/select&gt; &lt;select&gt; &lt;option&gt;1&lt;/option&gt; &lt;option&gt;2&lt;/option&gt; &lt;/select&gt; </code></pre> <p>Last, just call <code>$('select').sSelect();</code> once more. It should create DIVs under <strong>both</strong> of your <code>&lt;select&gt;</code> elements. Now here's the problem, The <strong>first</strong> select box represented by the DIVs doesn't behave properly.</p> <p><strong>Alternatively, you may obtain a completed example <a href="http://jsfiddle.net/XssbX/1/" rel="nofollow noreferrer">here</a> to see the issue directly.</strong></p> <p><strong>Normally</strong> when you choose an option from the select box represented by the DIVs, it should update the original <code>&lt;select&gt;</code> element's <code>selectedIndex</code> (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 <code>selectedIndex</code> value to -1 for any option.</p> <p>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 <code>$('select').sSelect;</code> twice, thus causing DOM problems.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload