javascript - 单击下拉列表项时不显示 Jquery 警报

Question

我试图在下拉列表中的项目被选中时弹出一个警报，下拉列表中填充了数据库项目。我遵循了代码的 jquery 部分的在线教程，其中代码工作正常并且弹出了警报。只是想知道是否有人可以帮助解释为什么它不能使用我的代码？ (ajax部分与我的问题无关)

            $(document).on('click', '.theclass', function() {
                var clicked = $(this).attr("id"); 
                alert(clicked);
            });

            });

    </script>

Answer 1

一些事情:

您不能链接到外部 JavaScript 源库并在单个 <script> 中嵌入您自己的 JavaScript元素。 您必须使用两个 <script>元素，像这样:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"><script>

 <script>
        $(document).on('click', '.studentclass', function() {
            var clickeditem = $(this).attr("id"); 
            alert(clickeditem);
        });
</script>

此外，您的代码还包含一个额外的 });最后，这是一个语法错误。

接下来，因为您正在动态创建元素，所以可能在元素添加到 DOM 之前运行连接事件处理程序的代码。在这种情况下， event delegation 推荐。即使当前代码在脚本运行之前创建元素，这也被认为是一种最佳实践，可以防止这在将来成为问题，如果您的代码结构发生变化。

正如那篇文章的开头所述:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

将您的代码更改为:

$(document).on("click", ".studentclass", function() {
  var clickeditem = $(this).attr("id"); 
  alert(clickeditem);
});

由于我们无法在此处重现 .php，我将使用静态元素展示工作代码。

$(document).on('click', '.studentclass', function() {
  var clickeditem = $(this).attr("id"); 
  alert(clickeditem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Find Student ></button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
      <div id="studentdrop">
       <div id='students1'>
          <a href="#" id="testing1" class="studentclass">student name</a>
       </div>
       <div id='students2'>
          <a href="#" id="testing2" class="studentclass">student name</a>
       </div>       
    </div>

  </div>
</div>