Question

我有一个项目下拉列表：

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Räume <span class="caret"></span></a>
<ul class="dropdown-menu" id="Room">
  <!-- Auto-Generated: Dropdown content -->
</ul>

..生成的元素如下所示：

<li class='LiRoom' id='Room 1'><a href='#'>R101</a></li>
<li class='LiRoom' id='Room 2'><a href='#'>R102</a></li>

..我想在我的网站上显示数据库条目，具体取决于所选的<li>项目的ID：

$(document).ready(function(){
  $("#Room").click(function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          document.getElementById('accordion').innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET", "GetRoomComponents.php?q=1", true);
    xmlhttp.send();
  });
});

1的{{1}}需要替换为GetRoomComponents.php?q=1的ID。但是我如何访问正确的？

此回复https://stackoverflow.com/a/3545356/5790966（将<li>替换为"#Room"）无效。如果我这样做，整个功能都不会执行（在最新的Chrome上测试）。

Answer 1

首先，如果你已经加载了它，你也可以使用jQuery来发出你的AJAX请求;这是一个更简单的逻辑。

要解决您的问题，您可以将委派的click()处理程序附加到所有li a元素，然后使用this关键字引用引发该事件的处理程序。然后，您可以阅读父prop('id')中的li。试试这个：

$("#Room").on('click', 'li a', function(e) {
  e.preventDefault();
  var liId = $(this).closest('li').prop('id');
  $('#accordion').load('GetRoomComponents.php?q=' + liId);
});

Answer 2

由于您点击li a元素，因此在jQuery中将其用作click事件。

jQuery('#Room').on('click', 'li a', function() {
    var liId = jQuery(this).parent().attr('id').replace('Room ', ''); //Read ID of current pressed LI:

    console.log(liId); Prints either 1 or 2
});

Answer 3

请勿点击＆＃34; Room＆＃34;因为这并不能让你访问可能也是点击目标的子元素。

相反，你可以在＆＃34; LiRoom＆＃34;类。

$(".LiRoom").click(function() {
  var id = $(this).attr("id"); //gets you the Id of the clicked element
  //...then your ajax code goes here
});

请注意，您的ID无效 - 它们中不能包含空格。将其修改为RoomX格式，例如Room1，Room2将符合HTML规范。

N.B。如果在页面加载之后创建<li>元素（因此在初始化单击事件处理程序之后），则可以使用委派事件处理，它将拾取与稍后添加的辅助选择器匹配的任何元素。像这样：

$("#Room").on("click", ".LiRoom", function() {
  var id = $(this).attr("id"); //gets you the Id of the clicked element
  //...then your ajax code goes here
});

这是一个有效的例子：

＆＃13;

$(function() {
  $("#Room").on("click", ".LiRoom", function() {
    var id = $(this).attr("id"); //gets you the Id of the clicked element
    alert(id); //just for demo
    //...then your ajax code goes here
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu" id="Room">
  <!-- Auto-Generated: Dropdown content -->
  <li class='LiRoom' id='Room1'><a href='#'>R101</a></li>
  <li class='LiRoom' id='Room2'><a href='#'>R102</a></li>
</ul>

＆＃13;

Answer 4

将事件发送到您的功能，如

$("#Room").click(function(e) {
    console.log(e.target.id);
....

Answer 5

尝试将您的事件处理程序附加到li而不是#room，这样您就可以捕获$（this）id。

此外，上面提到的广告：如果你使用的是jQuery，也可以使用它的AJAX功能。

另外＃2：确保您的ID有效，ID间隔无效。

$(document).ready(function(){
  $("#Room li").click(function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          document.getElementById('accordion').innerHTML = this.responseText;
      }
    };
	console.log($(this).attr('id'));
    xmlhttp.open("GET", "GetRoomComponents.php?q=" + $(this).attr('id'), true);
    xmlhttp.send();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Räume <span class="caret"></span></a>
<ul class="dropdown-menu" id="Room">
  <!-- Auto-Generated: Dropdown content --><li class='LiRoom' id='Room 1'><a href='#'>R101</a></li>
<li class='LiRoom' id='Room 2'><a href='#'>R102</a></li>

获取点击<li>的ID

5 个答案: