title: Ajax load from PHP/MySQL generated Bootstrap drop down with variable pass
body: <p>I have two problems with my code, but because I am not quite sure that they are not related, I'll ask them together.</p>
  
  <p>Question one: My button group, static + dynamically generated (by a PHP while loop of a MySQL query) drop down loads on the first page load. However, after loading content with Ajax the drop down menu does not work anymore (no drop down) and buttons don't react anymore. How come?</p>
  
  <p>Question two: How can I pass a variable from my PHP generated drop down to the Ajax load call? The first link (ID=1) works, all others do nothing (not even an error). If I make the ID static (make Ajax calls for every different link ID with their own IDNR) they all work.</p>
  
  <p>Code:
  HTML/PHP:</p>
  
  <pre><code>&lt;ul class="dropdown-menu" role="menu"&gt;
     &lt;?php
        $querygenre = "SELECT lib_genre.genre_name as name,
        lib_genre.genre_id as id from lib_edition
        join lib_editionrelatestowork on lib_editionrelatestowork.edition_id = lib_edition.edition_id
        join lib_workhasgenre on lib_workhasgenre.work_id = lib_editionrelatestowork.work_id
        inner join lib_genre on lib_genre.genre_id = lib_workhasgenre.genre_id
        group by lib_genre.genre_id order by name asc";
        $resultgenre = $db-&gt;query($querygenre);
  
        while ($result_row = $resultgenre-&gt;fetch(PDO::FETCH_ASSOC))
        {
           $genrename = $result_row['name'];
           $genreid = $result_row['id'];
     ?&gt;
     &lt;li&gt;
        &lt;a href="#" id="genre" idnr="&lt;?php echo $genreid?&gt;"&gt;
            &lt;?php echo $genrename?&gt;
        &lt;/a&gt;
     &lt;/li&gt;
     &lt;?php
        }
     ?&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>...</p>
  
  <pre><code>&lt;div class="row" id="content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>At the end of the HTMP/PHP file:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
      $(document).ready(function(){
          $('#genre').click(function(){
              var idnr = $(this).attr('idnr');
              url = "getbygenretest.php?genre_id=" + idnr;
              $('#content').load(url);
          });
  
          $('#test').click(function(){
              $('#content').load('getbygenretest.php?genre_id=3');
          });
      })
  &lt;/script&gt;
  </code></pre>