通过ajax加载导航后重新初始化引导下拉菜单

Question

我需要通过 ajax 为我的网站加载页眉和页脚。这工作得很好，但下拉菜单不再起作用。我尝试了各种方法来重新初始化它们，但效果有限。我能管理的最好的方法是打开但从不关闭的下拉菜单，并且功能有限。我试过的：

这是最简单的方法...

<script type="text/javascript">
    // get header and footer html from django
    $(document).ready(function(){
        $( "#header_placeholder" ).load( "/header/", function() {
            $('.dropdown-toggle').dropdown;
        });
        $( "#footer_placeholder" ).load( "/footer/");
    });
</script>

...但是什么也没发生。点击菜单仍然没有任何作用。

这让我更进一步：

<script type="text/javascript">
    // get header and footer html from django
    $(document).ready(function(){
        $.get("/header/", function(data){
            $("#header_placeholder").replaceWith($(data));
            $('.dropdown-toggle').dropdown();
        });
        $.get("/footer/", function(data){
            $("#footer_placeholder").replaceWith($(data));
        });
    });
</script>

它会导致下拉菜单打开，但永远不会关闭。 “悬停”类也从未添加到打开的 li 中，我想这会搞砸一些事情（包括我的一些样式）。

我发现了一个类似的问题 (Bootstrap dropdown not working after initial ajax form submission)，其中提问者很幸运地重新插入了引导 javascript。百灵鸟，我试了一下：

<script type="text/javascript">
    function reload_js(src) {
        $('script[src="' + src + '"]').remove();
        $('<script>').attr('src', src + '?cachebuster='+ new Date().getTime()).appendTo('head');
    }
    // get header and footer html from django
    $(document).ready(function(){
        $.get("/header/", function(data){
            $("#header_placeholder").replaceWith($(data));
            reload_js('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
            $('.dropdown-toggle').dropdown();

        });
        $.get("/footer/", function(data){
            $("#footer_placeholder").replaceWith($(data));

        });

        /*$( "#header_placeholder" ).load( "/header/", function() {
            alert('waiting');
            reload_js('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js');
            $('.dropdown-toggle').dropdown;
        });
        $( "#footer_placeholder" ).load( "/footer/", function() {
        });*/

    });
</script>

行为没有变化。我还找到了 Bootstrap dropdown doesnt work after ajax call (even after reinitializing) 。它是相似的，但他们从来没有得到任何解决方案。任何帮助将不胜感激。

Answer 1

我发现了问题。 .dropdown() 对于引导下拉菜单的库存实现可能已经足够了，但是我的模板已经由 PSD2HTML.com 从 PSD 转换而来，并包含一些很好的自定义 javascript 来激活悬停时的下拉菜单，以及一些移动增强功能。最后，我的解决方案是：

<script type="text/javascript">
    // get header and footer html from django
    $(document).ready(function(){
        $.get("/header/", function(data){
            $("#header_placeholder").replaceWith($(data));
            //re-initialize dropdown menus after load
            $('.dropdown-toggle').dropdown();
            initTouchNav();  /* <-- the new, important bit */
        });
        $.get("/footer/", function(data){
            $("#footer_placeholder").replaceWith($(data));
        });
    });
</script>