javascript - jquery - adding new content to page using onclick and .before -


i new jquery, starting head around ( think). have toggle ul (new restaurant) works button, when click on ul button want button create new toggle above pre-existing new restaurant button.

for example before

enter image description here

after

enter image description here

i trying work out on own, little guidance please.currently nothing happening, seen below:

enter image description here

script below:

 $(document).ready(function(){             $('li#order_open').click(function(){                var $newrestaurant = $('<li id="order_open">new restaurant <a href="menu.php";></a></li>');                $('li').before($newrestaurant);                 });                 
  <!--restaurant toggle-->              <a id="restt" class ="header"href="#" onclick="togglevisibility('rest');"><h3 id="open">your restaurants</h3></a>              <div id="rest" style="display: none;"><div>                        <ul class="tabs">                          <!--                    <li id="order" class="rred"><a href="franchise-account-orders.php">restaurant</a></li>-->                          <li id="order_open" class="rgreen"><a href="javascript:void(0);">new restaurant</a></li>                        </ul>

i have tried:

 $(document).ready(function(){             $('li#order').click(function(){                 $('li#order').before('<li id="order">new restaurant <a href="menu.php";></a></li>');                 });
 <a id="restt" class ="header"href="#" onclick="togglevisibility('rest');"><h3 id="open">your restaurants</h3></a>              <div id="rest" style="display: none;"><div>                        <ul class="tabs">                          <!--                    <li id="order" class="rred"><a href="franchise-account-orders.php">restaurant</a></li>-->                          <li id="order_open" class="rgreen"><a href="javascript:void(0);">new restaurant</a></li>                        </ul>

i hope, understand question right. can add before element in way:

 $(document).ready(function(){      $('#order_open').click(function(){          //html want add          var $newrestaurant = '<li id="order_open">new restaurant<a href="menu.php";></a></li>';          //insert before clicked button          $(this).before($newrestaurant);      }); }); 

i've made fiddle you: http://jsfiddle.net/6o593keg/

if want event handler on inserted button have add new event handler after you've inserted new element:

$(this).click(...) 

Comments

Popular posts from this blog

1111. appearing after print sequence - php -

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -