Jquery 使用javascript添加新的选择控件后重新初始化flexselect.js

我试图使用flexselect.js使选择框更易于使用，并使用jquery.formset.js动态添加新的表单集表单

我在这里使用内联表单集。最上面一行是表单，而灰色框中的字段和表单集表单字段。 带有“------------”的输入字段是flexselect.js已转换为输入字段的选择框

在我使用JQuery（

JQuery.formset.js

）通过单击UI上的“添加项”添加新的表单集表单之前，一切都很正常

jquery.formset

按预期添加了一个新表单，但是

flexselect.js

没有正确加载第一个字段（我用红色突出显示的字段），因此它是空白的，而不是像它上面的字段（我用黄色突出显示的字段）那样包含“--------------”。当我单击输入字段时，焦点离开输入字段并转到高亮显示的黄色字段。简而言之，flexselect仅适用于flexselect首次初始化时出现的选择框

有谁能告诉我，每当我添加新的表单集表单时，如何重新初始化

flexselect

，以便flexselect停止忽略新添加的选择框

我在下面添加相关代码：

<script type="text/javascript">

    jQuery(document).ready(function() {
        // This initializes flexselect
        $("select.flexselect").flexselect();

        // this initializes jquery.formset.js and is used for adding new formset forms
        $(".inline.{{ posting_form.prefix }}").formset({
            prefix: "{{ posting_form.prefix }}",
            addText: "Add item",
            deleteText: "Remove",
            added: function(){  // called when the formset form has been added
                $('select.flexselect').flexselect();
                // maybe some more code here.......
            },
        });
    });
</script>

jQuery（文档）.ready（函数（）{
//这将初始化flexselect
$（“select.flexselect”）.flexselect（）；
//这将初始化jquery.formset.js，并用于添加新的表单集表单
$（“.inline.{{posting_form.prefix}}”）.formset({
前缀：“{posting_form.prefix}}”，
addText:“添加项目”，
删除文本：“删除”，
添加：添加表单集表单时调用函数（）{//
$（'select.flexselect'）.flexselect（）；
//也许这里有更多的代码。。。。。。。
},
});
});

我找到了解决上述问题的有效方法。这与

jquery.formset.js

的工作方式有关。万一有人撞到了这块砖头，我就这样把它修好

单击“添加项”时，

jquery.formset.js

知道包含最初显示的表单集表单的容器。然后遵循此算法：

克隆一个表单集表单

在最后一个表单集表单容器之后将其添加到DOM中

重新计算并更改

id

、

name

和其他属性

等

另一方面，

flexselect.js

通过在DOM中查找指定的

select

标记并向其添加一些数据来工作

通过将已被操纵的克隆的

select

s添加回DOM，是导致意外行为的原因

我想不出比修改jquery.formset.js的源代码更好的方法了。我这样更改了它（从第75行开始）：

到

$addBtn.click(function() {
            var nextIndex = parseInt($('#id_' + options.prefix + '-TOTAL_FORMS').val());
            var row = $('.' + options.formCssClass + ':first').clone(true).get(0);
            // formset.js does not know that the form has been manipulated by flexselect.js. By cloning the form as
            // it is, it clones elements that have already had events and stuff attached to them. This is what
            // causes the weird behavior with flexselect.js

           // first we'll remove the class and style attributes
            $(row).find('select.flexselect').last().removeAttr("class style");
           // next, remove the input field that was previously generated by flexselect
            $(row).find('input.flexselect').remove();

            $(row).removeAttr('id').insertAfter($('.' + options.formCssClass + ':last'));
            $(row).find('input,select,textarea,label').each(function() {
                updateElementIndex(this, options.prefix, nextIndex);
                // If this is a checkbox or radiobutton, set uncheck it.
                // Fix for Issue 1, reported by Wilson.Andrew.J:
                var elem = $(this);
                if (elem.is('input:checkbox') || elem.is('input:radio')) {
                    elem.attr('checked', false);
                } else {
                    elem.val('');
                }
            });

            // At this point, formset.js has done most of the major lifting. We can now add the attributes that
            // flexselect.js needs which is just a select with a CSS class called 'flexselect'.
            $(row).find("select").attr("class", "flexselect");
            var formCount = nextIndex + 1;
            $('#id_' + options.prefix + '-TOTAL_FORMS').val(formCount);
            // If we've got more than one form, enable delete buttons:
            if (formCount > 1) { $('a.' + options.deleteCssClass).show(); }
            // If a post-add callback was supplied, call it with the added form:
            if (options.added) options.added($(row));
            return false;
        });

然后我调整了初始化代码，如下所示：

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("select.flexselect").flexselect();

        $(".inline.{{ posting_form.prefix }}").formset({
            prefix: "{{ posting_form.prefix }}",
            addText: "Add item",
            deleteText: "Remove",
            added: function(){
                $('select.flexselect').last().removeData("flexselect");
                $('select.flexselect').flexselect();
            },
        });
    });
</script>

jQuery（文档）.ready（函数（$）{
$（“select.flexselect”）.flexselect（）；
$（“.inline.{{posting_form.prefix}}”）.formset({
前缀：“{posting_form.prefix}}”，
addText:“添加项目”，
删除文本：“删除”，
新增：函数（）{
$（'select.flexselect'）.last（）.removeData（“flexselect”）；
$（'select.flexselect'）.flexselect（）；
},
});
});

我就是这样修好的。希望它能帮助别人

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $("select.flexselect").flexselect();

        $(".inline.{{ posting_form.prefix }}").formset({
            prefix: "{{ posting_form.prefix }}",
            addText: "Add item",
            deleteText: "Remove",
            added: function(){
                $('select.flexselect').last().removeData("flexselect");
                $('select.flexselect').flexselect();
            },
        });
    });
</script>