Question

这让我发疯了，我有这个简单的html bootstrap-gentelella模板几乎可以在我开发的网站的每个页面中运行，html非常简单：（此代码通过单击“a”标记中的“collapse-link”类使类“x_content”中的部分可见或不可见）

<div class="x_panel">
    <ul class="nav navbar-right panel_toolbox">
        <li>
            <a class="collapse-link freccia_feed">Replies
                        <i class="fa fa-chevron-up"></i>
            </a>
        </li>
    </ul>
    <div class="x_content" style="display: none;">
        <div class="input-group col-md-12 col-sm-12 col-xs-12">
            <input data-role="tagsinput" id="risposta_'+j+'_D_'+element+'" class="form-control risposta_domanda_'+element+'" name="reply" value="" placeholder="Insert one solution" type="text">
            <span class="input-group-btn">
                <button  id="elimina_risp_'+j+'_D_'+element+'" class="btn btn-danger glyphicon glyphicon-trash" > </button>
            </span>
        </div>
    </div>
</div>

要小心，像id="risposta_'+j+'_D_'+element+'"这样的部分在这个静态部分没有任何意义，并且就像它一样呈现，例如，我在jQuery函数中使用它而无法使它工作！这里：

 $("#domanda_"+element).append(
                        '<div class="x_panel">'+
                        '<ul class="nav navbar-right panel_toolbox">'+
                        '<li>'+
                        '<a class="collapse-link freccia_feed" >Replies'+
                        '<i class="fa fa-chevron-up"></i>'+
                        '</a></li></ul>'+
                        '<div class="x_content" style="display: none;">'+
                        '<div class="input-group col-md-12 col-sm-12 col-xs-12">'+
                        '<input data-role="tagsinput" id="risposta_'+j+'_D_'+element+'" class="form-control risposta_domanda_'+element+'" name="reply"'+
                        'value="" placeholder="Insert one solution" type="text">'+
                        '<span class="input-group-btn"><button  id="elimina_risp_'+j+'_D_'+element+'" class="btn btn-danger glyphicon glyphicon-trash" >'+
                        '</button></span>'+
                        '</div></div></div>');

我已经尝试了很多选项来使这个字符串在append（）中工作，并且唯一一个看起来用它来整个字符串包含单个'使用double " for ids类等。然后使用单个'和+注入javascript变量。新线也一样。我甚至尝试使用https://www.freeformatter.com/javascript-escape.html

等在线转义工具来逃避整个字符串

但仍然是相同的结果，如果附加了组件，则该组件不起作用！

Answer 1

问题在于gentelella js的“.collapse-link”类的“inizialization”。

所以我在“div”生成函数下移动函数。我甚至添加了一个“unbind（）”函数来解决“inizialization”可以切换甚至已经渲染的div使它们打开anc关闭几次的问题...... 这是代码，如果有人可以发现它有用欢呼声

                $(".collapse-link").unbind("click");

                $(".collapse-link").on("click", function() {
                    var a = $(this).closest(".x_panel")
                            , b = $(this).find("i")
                            , c = a.find(".x_content");
                    a.attr("style") ? c.slideToggle(200, function() {
                        a.removeAttr("style")
                    }) : (c.slideToggle(200),
                            a.css("height", "auto")),
                            b.toggleClass("fa-chevron-up fa-chevron-down")
                });

append（）无法使boostrap组件工作

1 个答案: