Как использовать динамический идентификатор для HTML-элемента в JavaScript?

Question

Я пытаюсь динамически создать раскрывающийся список, здесь я могу динамически создавать раскрывающиеся списки, но после этого мне нужно загрузить значения из БД, поэтому мне нужно сделать функцию нажатия.Здесь я пытаюсь использовать динамический идентификатор, но это не работает, как решить эту проблему.

$( document ).ready(function() {
    
    $("#ssr").click(function(){
        
      alert("Test");    
    
      load_shift_code();
    });
  
  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    for(var i=0;i<4;i++){
    var a=["html","css","java","javascript","php","c++","node.js","ASP","JSP","SQL"];
    var employee_name =emp_name();  
    var table_body = document.getElementById("table_head");
    var row = table_body.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2)
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    var cell6 = row.insertCell(5)
    var cell7 = row.insertCell(6);
    var cell8 = row.insertCell(7);
    var cell9 = row.insertCell(8);
    var cell10 = row.insertCell(9);
    var cell11 = row.insertCell(10);
    var cell12 = row.insertCell(11);
    
    var drop_down_list =document.getElementById("select");
  var idx="ssr";
    cell1.innerHTML = employee_name[i];
    cell2.innerHTML = employee_name[i];
    cell3.innerHTML = "<select  id='" + idx +"'><option value='default'>default</option></select>";
    cell4.innerHTML = "<select  id='select'><option value='default'>default</option></select>";
    cell5.innerHTML = "<select  id='select'><option value='default'>default</option></select>";
    cell6.innerHTML = "<select  id='select'><option value='default'>default</option></select>";
    cell7.innerHTML = "<select  id='select'><option value='default'>default</option></select>";
    cell8.innerHTML = "<select  id='select'><option value='default'>default</option></select>";
    cell9.innerHTML = "<select  id='select'><option value='default'>default</option></select>";
    cell10.innerHTML ="<select  id='select'><option value='default'>default</option></select>";
    cell11.innerHTML ="<select  id='select'><option value='default'>default</option></select>";
    
}
  
  
  
});

Answer 1

Поместите код для добавления прослушивателя событий в элемент с идентификатором ssr после кода, который создает элемент и помещает его в DOM .Как размещено $("#ssr") ничего не найдет.