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='&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();

没关系，它运作得很好，问题是我还有一个按钮，如果你点击广告越来越多的选择框，你想要多少。（没关系为什么：P）这些选择框也是在jquery的帮助下创建的，所以我将它动态添加到dom。

所以我的问题是这些新的选择框当然不会继承样式，我知道这是因为我稍后将它们添加到dom中，但是我可以在on方法的帮助下使它们继承吗？ / p>

谢谢，任何帮助！

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功能对您没有帮助。只要在每次添加新元素时都调用该函数：

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

它将忽略“旧”<select> s。

Jquery与on方法有关

2 个答案: