Reinitializing Bootstrap dropdowns after nav loaded via ajax
<p>I need to load the header and footer for my site via ajax.  This works just fine, but dropdown menus no longer function.  I've tried various methods to reinitialize them, with some limited success.  The best I can manage is dropdowns that open, but never close, and have somewhat limited functionality.  What I've tried:</p>

<p>This was the simplest approach...</p>

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

<p>...but nothing happens.  Clicking on menus still does nothing at all.</p>

<p>This gets me a little farther:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    // 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));
        });
    });
&lt;/script&gt;
</code></pre>

<p>It results in dropdown menus that will open, but never close.  The "hover" class is also never added to the li on open, which I imagine screws up a few things (including some of my styling).</p>

<p>I found a similar question (<a href="https://stackoverflow.com/questions/30578971/bootstrap-dropdown-not-working-after-initial-ajax-form-submission">Bootstrap dropdown not working after initial ajax form submission</a>), in which the asker had some luck reinserting the bootstrap javascript.  On a lark, I tried it:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    function reload_js(src) {
        $('script[src="' + src + '"]').remove();
        $('&lt;script&gt;').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() {
        });*/

    });
&lt;/script&gt;
</code></pre>

<p>No change in behavior.  I also found <a href="https://stackoverflow.com/questions/34330227/bootstrap-dropdown-doesnt-work-after-ajax-call-even-after-reinitializing">Bootstrap dropdown doesnt work after ajax call (even after reinitializing)</a> . It's similar, but they never get anywhere with a solution.  Any help would be greatly appreciated.</p>