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>

它会导致下拉菜单打开，但永远不会关闭。＆＃34;悬停＆＃34; class也从未添加到打开的li中，我想这会搞砸一些东西（包括我的一些造型）。

我发现了一个类似的问题（c），其中提问者有一些运气重新插入bootstrap 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 not working after initial ajax form submission。它类似，但他们从来没有得到任何解决方案。任何帮助将不胜感激。

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>

通过ajax加载导航后重新初始化Bootstrap下拉列表

1 个答案: