动态创建的手风琴不起作用。为什么？答案

【问题标题】：Dynamically created accordion not working. Why?动态创建的手风琴不起作用。为什么？
【发布时间】：2012-09-14 02:49:18
【问题描述】：

谁能告诉我这个手风琴为什么不工作？

ajax 调用工作正常，创建手风琴 div 时使用与手风琴 2 div 相同的结构（用于检查手风琴是否正常工作！）

div 被适当的类修饰：

<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist">

但仅此而已。没有任何动态创建的内容被触及。并且 div 只是像正常一样呈现（即没有格式，只是链接和文本交替，不是手风琴！）

如您所见，我尝试将手风琴（）的调用分散到各处，但无济于事。

这显然与条目是动态创建的事实有关。但是谷歌搜索似乎发现其他人使用类似的设置也很好。

PS 我很累而且一无所知，所以这可能是一些愚蠢的事情！

    <script>
        $(document).ready(function() {

            $("#accordion").accordion({
                header: "h3"
            });

            $.ajax({
                type: "GET",
                url: "/api/blog",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(blogs) {
                    for (var i in blogs) {
                        $('#accordion').append(
                            $('<div/>').append(
                                $('<h3></h3>').append(
                                    $('<a href="#"/>').append(
                                        blogs[i].Title
                                    )
                                )
                            ).append(
                                $("<div/>").append(
                                    blogs[i].Body
                                )
                            )
                        );
                    }
                    $("#accordion").accordion({
                        header: "h3"
                    });
                }
            });
            $("#accordion").accordion({
                header: "h3"
            });
            $("#accordion2").accordion({
                header: "h3"
            });
        });
    </script>
</head>
    <body>
    <div id="accordion"></div>
    <div id="accordion2">
            <div>
                <h3><a href="#">First</a></h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
            </div>
            <div>
                <h3><a href="#">Second</a></h3>
                <div>Phasellus mattis tincidunt nibh.</div>
            </div>
            <div>
                <h3><a href="#">Third</a></h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

对于一个你初始化你的手风琴两次太多次尝试删除其中两个：

$("#accordion").accordion({
                header: "h3"
            });

但保留 ajax 函数内部的初始化，以便在初始化手风琴之前填充内容。

【讨论】：

我只是开始分散它们，因为它不起作用。我从来没有想过多个电话会搞砸。您的建议一定是我没有尝试过的唯一配置！天哪，好尴尬。我不愿意问，因为我知道这将是一个 DOH！哈哈。它正在工作。干杯！