2

嗨，我有一个表单，我有一些选择框，我使用一个小而简单的小 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 方法的帮助下让它们继承谁呢？

感谢您的任何帮助！

4

2 回答 2

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);
于 2012-04-26T10:53:36.920 回答
0

该on功能在这里对您没有帮助。每次添加新元素时只需调用该函数：

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

如果您想在一个查询中获取新的“选择”：
在 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();

它会忽略 "old" <select>s。

于 2012-04-26T10:55:30.033 回答