问题描述:

I am using Foundation 3 for a website I did a while back and it uses the Dropdown Buttons. Everything's fine but I have to load a form and some buttons via Ajax. The Buttons that came in via Ajax do not work (they just won't open). So far I was unable to find a solution. I also tried calling:

 $(document).foundationButtons();

or

 $(mySelector).foundationButtons();

After the Ajax call completed but both result in breaking ALL Dropdown buttons on the entire page. Please help.

Thanks.

This is the code I am loading via Ajax.

 <div href="#" class="button dropdown">

Edit

<ul>

<li><a href="#" class="internal">Internal Data</a></li>

<li><a href="#" class="external">External Data</a></li>

<li class="divider"></li>

<li><a href="#" class="settings">Settings</a></li>

</ul>

</div>

The call is going through a regular jQuery $.ajax(); routine. The problem here is that dropdown buttons aren't being rendered by Foundation after being injected into the page via Ajax.

网友答案:

It's been a while since I asked this question and I figured it out myself. The drop down buttons simply don't work after being injected into the page via Ajax. I wrote a jQuery plugin that takes care of this problem:

$.fn.prettyButtons = function(){
    $('.button.dropdown > ul').addClass('no-hover');
    var u = $(".button.dropdown:not(.large):not(.small):not(.tiny):visible", this).outerHeight() - 1,
            a = $(".button.large.dropdown:visible", this).outerHeight() - 1,
            f = $(".button.small.dropdown:visible", this).outerHeight() - 1,
            l = $(".button.tiny.dropdown:visible", this).outerHeight() - 1;
   $(".button.dropdown:not(.large):not(.small):not(.tiny) > ul", this)
   .css("top", u), $(".button.dropdown.large > ul", this)
   .css("top", a), $(".button.dropdown.small > ul", this).css("top", f),   
   $(".button.dropdown.tiny > ul", this).css("top", l), 
   $(".button.dropdown.up:not(.large):not(.small):not(.tiny) > ul", this)
   .css("top", "auto")
   .css("bottom", u - 2), $(".button.dropdown.up.large > ul", this)
   .css("top", "auto")
   .css("bottom", a - 2), $(".button.dropdown.up.small > ul", this)
   .css("top", "auto")
   .css("bottom", f - 2), $(".button.dropdown.up.tiny > ul", this)
   .css("top", "auto")
   .css("bottom", l - 2);
}

This simply repeats all steps run by Foundation to create the button on demand. Usage is simple:

$('.selector').prettyButtons();

Just in case anybody runs into this problem.

网友答案:

For anyone who encounters similar issues, I managed to solve by below...

https://github.com/zurb/foundation/issues/4587

$('#elementId').foundation('dropdown', 'reflow'); <-- I added this, after the html had been created.

Note, should be applied to container, not the actual dropdown link.

相关阅读:
Top