来自 PHP/MySQL 的 Ajax 加载生成带有变量传递的 Bootstrap 下拉列表

Posted 2023-02-24

【中文标题】来自 PHP/MySQL 的 Ajax 加载生成带有变量传递的 Bootstrap 下拉列表

【英文标题】：Ajax load from PHP/MySQL generated Bootstrap drop down with variable pass

【发布时间】：2014-09-13 20:00:24

【问题描述】：

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

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

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

代码： 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>

【参考方案1】：

我不确定，但试试这个：

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

您的 HTML 属性重复。

【讨论】：

啊，是的，我的第二个问题就是这样。您知道为什么加载 ajax 内容后我的下拉菜单不起作用吗？

没关系，我找到了。加载页面上包含的某些（标准）JS 似乎存在冲突。因为无论如何它们都是不必要的，所以我删除了它们，现在一切正常。