Jquery問題的方法

Question

Hy，我有一個女巫的形式，我有一些選擇框，我用一個小而簡單的小jquery插件來幫助我設計它們。

$.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(); 

而且它的確定，它的偉大工程，問題是，我也有，如果你點擊廣告，其越來越多的選擇框，只要你想盡可能多的按鈕（沒關係原因：P）。 這些選擇框也是在jquery的幫助下創建的，所以我將它動態添加到dom中。

所以我的問題是，這些新的選擇框當然不會繼承樣式，我知道這是因爲我以後將它們添加到DOM，但是我可以讓它們繼承on方法的幫助？

謝謝，任何幫助！

Answer 1

你只需要調用再次

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

你添加新的選擇到DOM後。小心添加一個特殊的類，以便您的customSelect（）代碼僅適用於新添加的元素，否則您將附加事件兩次。礦石則可以將插件使得它不重視的事件兩次，但那是比較困難（提示使用.data()）

避免做奇怪的事情，如果你打電話$('select.newSelect').customSelect();你可以做

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); 

Answer 2

的on功能在這裏不會幫助你。只需要調用該函數每次添加新elemenes：

$("<select id="aaa">").appendTo('#foo').customSelect(); 

---

如果你想虎視眈眈在一個查詢新的 「選擇」 S：
做這在DOM準備：

$(function(){ 
    $('select').customSelect().addClass('old'); 
}); 

後來就

$('select:not(.old)').customSelect().addClass('old');  

---

您還可以更改插件添加該類而忽略與old類元素：

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

    if(!$.browser.msie || ($.browser.msie&&$.browser.version>6)){ 
    return this.filter(':not(.old)').each(function() { // <==== ====== ===== ====== === 
     $(this).addClass('old'); // <==== ====== ===== ===== ==== 
     var outerClass = options.customClass, 
      innerClass = options.customClass_inner; 

     var currentSelected = $(this).find(':selected'); 
     var html = currentSelected.html(); 
     if(!html){ html='&nbsp;'; } 
     $(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(); 

而且它會忽略「老「<select> s。