Apply javascript styling funtion to before() function

[68thorby68]

Hi All,
I am using a JS pluging (executed by document.ready function) to style HTML select item. I am also using the before() function to insert additional select items, as needed.

However, the select items added using the before() function does not invoke the plugin to style the select box, even though I have included all of the necessary tags to activate the plugin.

Any ideas?

[68thorby68]

After a lot of fiddling it appears the solution could be quite simple, but not kowling a great deal of javascript I'm not sure if what I'm doing has any knock-on effects.

I have a function that calls the styling of my select box

$(document).ready(function(){
        $('.select_box').styleSelect();
    });

I have another function to insert more HTML select boxes, when required. Called from an anchor <a href>.

$(document).ready(function moreFees() {
    var i=1;
    $('a.addmorefees').click(function(){ 
        $('#otherFeesRef').before("<select name='otherType["+i+"]' title='Please select a value' class='select_box'><option></option><option value='1'>Value 1</option><option value='2'>Value 2</option><option value='3'>Value 3</option></select>");

        i++;


        });
    });

However, when I insert the additional select boxes the select box is not styled.

So after hours of fiddling, I found I can simply add a call to the styling function from within the before() function to get the correct styling.

$(document).ready(function moreFees() {
    var i=1;
    $('a.addmorefees').click(function(){ 
        $('#otherFeesRef').before("<select name='otherType["+i+"]' title='Please select a value' class='select_box'><option></option><option value='1'>Value 1</option><option value='2'>Value 2</option><option value='3'>Value 3</option></select>");

        $('.select_box').styleSelect();

        i++;


        });
    });

As said before, this gives the required result but I do not know if there is any negative impact.

[Taywin]

I have no idea what styleSelect() function does in your script, so I can't comment on any negative impact. However, it doesn't seem to be that much anyway.

By the way, do you have the CSS .select_box already inside your CSS when the page is loaded? Or you simply add it dynamically?