javascript - 来自 PHP/MySQL 的 Ajax 加载使用变量 pass 生成的 Bootstrap 下拉列表

Question

我的代码有两个问题，但因为我不太确定它们是否相关，所以我会一起问。

问题一:我的按钮组，静态 + 动态生成(通过 MySQL 查询的 PHP while 循环)在第一页加载时下拉加载。但是，在使用 Ajax 加载内容后，下拉菜单不再起作用(没有下拉菜单)并且按钮不再有反应。怎么会？

问题二:如何将 PHP 生成的下拉列表中的变量传递给 Ajax 加载调用？第一个链接 (ID=1) 有效，所有其他链接什么都不做(甚至没有错误)。如果我将 ID 设置为静态(使用 Ajax 调用每个不同的链接 ID 并使用它们自己的 IDNR)它们都可以工作。

代码: HTML/PHP:

<ul class="dropdown-menu" role="menu">
   <?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->query($querygenre);

      while ($result_row = $resultgenre->fetch(PDO::FETCH_ASSOC))
      {
         $genrename = $result_row['name'];
         $genreid = $result_row['id'];
   ?>
   <li>
      <a href="#" id="genre" idnr="<?php echo $genreid?>">
          <?php echo $genrename?>
      </a>
   </li>
   <?php
      }
   ?>
 </ul>

...

<div class="row" id="content">
</div>

在 HTMP/PHP 文件的末尾:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(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');
        });
    })
</script>

Answer 1

我不确定，但试试这个:

将 id="genre" 更改为 class="genre" 并将 $('#genre') 更改为 $( '.genre').

您的 HTML 属性重复。