Предупреждение Jquery не отображается, когда нажата кнопка раскрывающегося списка.

Question

Я пытаюсь получить предупреждение, чтобы всплывать, когда выбран элемент в выпадающем списке, в раскрывающемся списке отображаются элементы базы данных. Я следил за учебником онлайн для части jquery кода, где код работал нормально, и появилось предупреждение. Просто интересно, может ли кто-нибудь помочь, почему он не работает с моим кодом? (На основе AJAX часть не имеет ничего общего с моим вопросом)

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

      }); 

    </script> 

Answer 1

Несколько вещей:

Вы не можете ссылаться на внешние библиотеки исходного JavaScript и встраивать свой собственный JavaScript в одном <script> элемента. Вы должны использовать два <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. Даже если текущий код создает элемент до запуска скрипта, это считается лучшей практикой для защиты от этого, что становится проблемой в будущем, если ваша структура кода изменится.

В начале этой статьи гласит:

делегация события позволяет прикрепить один слушатель событий, к родительскому элементу, который будет срабатывать для всех потомков, соответствующих селектор , существуют ли эти потомки теперь или добавлены в будущее .

Изменить код:

$(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>