jquery - Foundation 3 post ajax drop down buttons -


i using foundation 3 website did while , uses dropdown buttons. everything's fine have load form , buttons via ajax. buttons came in via ajax not work (they won't open). far unable find solution. tried calling:

  $(document).foundationbuttons();  

or

  $(myselector).foundationbuttons();  

after ajax call completed both result in breaking dropdown buttons on entire page. please help.

thanks.

this code 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 going through regular jquery $.ajax(); routine. problem here dropdown buttons aren't being rendered foundation after being injected page via ajax.

it's been while since asked question , figured out myself. drop down buttons don't work after being injected page via ajax. wrote jquery plugin takes care of problem:

$.fn.prettybuttons = function(){     $('.button.dropdown > ul').addclass('no-hover');     var u = $(".button.dropdown:not(.large):not(.small):not(.tiny):visible", this).outerheight() - 1,             = $(".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", - 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 repeats steps run foundation create button on demand. usage simple:

$('.selector').prettybuttons(); 

just in case runs problem.


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -