Question

Hy, i have a form in witch i have some select boxes, i use a small and easy little jquery plugin to help me style them.

$.fn.extend({
customSelect : function(options) {

  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
  return this.each(function() {

        var outerClass = options.customClass,
            innerClass = options.customClass_inner;

        var currentSelected = $(this).find(':selected');
        var html = currentSelected.html();
        if(!html){ html=' '; }
        $(this).after('<span class="customStyleSelectBox"><span class="customStyleSelectBoxInner">'+html+'</span></span>').css({position:'absolute', opacity:0,fontSize:$(this).next().css('font-size')});
        var selectBoxSpan = $(this).next();
        var selectBoxWidth = parseInt($(this).width()) - parseInt(selectBoxSpan.css('padding-left')) -parseInt(selectBoxSpan.css('padding-right'));         
        var selectBoxSpanInner = selectBoxSpan.find(':first-child');
        selectBoxSpan.css({display:'inline-block'});
        selectBoxSpanInner.css({width:selectBoxWidth, display:'inline-block'});
        var selectBoxHeight = parseInt(selectBoxSpan.height()) + parseInt(selectBoxSpan.css('padding-top')) + parseInt(selectBoxSpan.css('padding-bottom'));
        $(this).height(selectBoxHeight).change(function(){
        selectBoxSpanInner.text($(this).find(':selected').text()).parent().addClass('changed');
        }); 
  });
  }
}
});
$('select').customSelect();

And it’s ok, it works great, the problem is that i also have a button which if you click on ads more and more select boxes, as many as you want.(Never mind why :P)
These select boxes are created also with the help of jquery so i’m adding it dynamically to the dom.

So my problem is that these new select boxes of course don’t inherit the style, i know that it’s because i add them later to the dom, but who can i make them inherit with the help of the on method?

Thank you, for any help!

Answer 1

You just need to call again

$('select.newSelect').customSelect();

after you add the new select to the DOM. Be careful to add a peculiar class so that your customSelect() code applies only to newly added elements, otherwise you attach events twice. Ore you could generalize the plugin so that it doesn’t attach events twice but that’s more difficult (hint use .data() )

To avoid doing strange things if you call $('select.newSelect').customSelect(); you could do

  if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){
  return this.each(function() {

  if($(this).data('customSelectApplied') !== ''){
        // whe already attached the custom functionality here
        return;
    }else{
        //continue as usual
        $(this).data('customSelectApplied', true);