【问题标题】:Jquery plugin not working on append contentJquery插件不适用于附加内容
【发布时间】:2014-09-21 22:17:29
【问题描述】:

我正在使用来自http://silviomoreto.github.io/bootstrap-select 的选择器 该插件由此代码启动。

$('.selectpicker').selectpicker();

当我想使用“.append”添加内容时,此选择器似乎不适用于选择框。有人知道如何解决这个问题吗?

jQuery(function(){
var highlight_counter = 1;
jQuery('a.add-highlight').click(function(event){
    jQuery('table.highlights').append('<tr class="report-line"><td class="float-left margin-top"><input type="text" class="form-control-form input-tiny margin-right" placeholder="mm"></td><td class="report-players-alt float-left margin-bottom margin-top"><span class="report-players-icon bowders-left"><i class="fa fa-thumb-tack"></i></span><select id="highlights' + highlight_counter + '" class="selectpicker margin-bottom bowders-right"><option value="0">Select a highlight</option><option value="goal">Goal</option><option value="yellow">Yellow Card</option><option value="red">Red Card</option><option value="sub">Substitution</option></select><div id="msgbox' + highlight_counter + '"></div></td><td class="row-remove-alt pointer"><i class="fa fa-times-circle"></i></td></tr>');

    highlight_counter++;
});
jQuery("table.highlights").on('click','.row-remove-alt',function(event){
    $(this).closest('tr').remove();
});

});

非常感谢!

S

【问题讨论】:

    标签: jquery twitter-bootstrap select append


    【解决方案1】:

    添加选项后,您必须刷新/更新您的选择器。试试.selectpicker('refresh')

    【讨论】:

    • 分享一个工作链接。这将有助于我们更好地了解您的问题。
    【解决方案2】:
    jQuery(function(){
            var highlight_counter = 1;
            jQuery('a.add-highlight').click(function(event){
            jQuery('table.highlights').append('<tr class="report-line"><td class="float-left margin-top"><input type="text" class="form-control-form input-tiny margin-right" placeholder="mm"></td><td class="report-players-alt float-left margin-bottom margin-top"><span class="report-players-icon bowders-left"><i class="fa fa-thumb-tack"></i></span><select id="highlights' + highlight_counter + '" class="selectpicker margin-bottom bowders-right"><option value="0">Select a highlight</option><option value="goal">Goal</option><option value="yellow">Yellow Card</option><option value="red">Red Card</option><option value="sub">Substitution</option></select><div id="msgbox' + highlight_counter + '"></div></td><td class="row-remove-alt pointer"><i class="fa fa-times-circle"></i></td></tr>');
            highlight_counter++;
            return false;
        });
        jQuery("table.highlights").on('click','.row-remove-alt',function(event){
            $(this).closest('tr').remove(); return false;
        });
    });
    

    在函数末尾添加 return false 以防止默认操作

    【讨论】:

    • 添加 $('#highlights'+highlight_counter).selectpicker();在 highlight_counter++;
    猜你喜欢
    • 1970-01-01
    • 2013-08-15
    • 2015-06-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-07
    • 2013-08-25
    • 1970-01-01
    相关资源
    最近更新 更多