Dynamisch erzeugtes Element löst keinen Trigger aus

Question

Ich habe einen Block mit dynamischem Code, der so aussieht.

 var li3 = document.createElement('li'); 
     li3.classList.add("col-sm-3"); 
     li3.classList.add("no_padding"); 
     var inner = ""; 
     inner = inner + "<div class='dropdown'>"; 
     inner = inner + "<button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0 4px 4px 0;' type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true' data-questnrid='"+questnrid+"' data-questionid='"+questionid+"' data-dlnkid='"+dlnkid+"' data-lnkid='"+lnkid+"' data-qstaskedid='"+qstaskedid+"' data-qstaskedgrpid='"+qstaskedgrpid+"'>"; 
     inner = inner + "<span class='dropdown_text'>Choose a option</span>"; 
     inner = inner + "<span class='caret'></span>"; 
     inner = inner + "</button>"; 
     inner = inner + "<ul class='dropdown-menu' aria-labelledby='dropdownMenu1'>"; 
     inner = inner + "<li><a href='#' class='list-item'>Yes</a></li>"; 
     inner = inner + "<li><a href='#' class='list-item'>No</a></li>"; 
     inner = inner + "<li><a href='#' class='list-item'></a></li>"; 
     inner = inner + "</ul>"; 
     inner = inner + "</div>"; 
     li3.innerHTML = inner; 
     document.getElementById(thisID).appendChild(li3); 

im Web sieht es eher so aus.

<li class='col-sm-2 no_padding'> 
    <div class='dropdown'> 
     <button class='btn btn-default dropdown-toggle col-sm-12' style='border-radius: 0px 4px 4px 0px; type='button' id='dropdownMenu1' data-toggle='dropdown' aria-haspopup='true' aria-expanded='true'> 
      <span class='dropdown_text'>Choose a option</span> 
      <span class='caret'></span> 
     </button 
     <ul class='dropdown-menu' aria-labelledby='dropdownMenu1'> 
      <li><a href='#' class='list-item'>Yes</a></li> 
      <li><a href='#' class='list-item'>No</a></li> 
      <li><a href='#' class='list-item'></a></li> 
     </ul> 
    </div> 
</li> 

Der erste Block wird durch Drücken der Taste n aufgerufen und generiert die Liste perfekt.
Aber jetzt klicke ich auf das Dropdown, um den Wert für dieses Dropdown zu akzeptieren, und kein Ereignis wird ausgelöst. Das habe ich benutzt.

$('.dropdown-menu li > a').on("click", function(event){ 
     console.log("fire"); 
     $(this).closest('.dropdown').find('button span.dropdown_text').text(this.innerHTML); 
    }); 

Dieses Ereignis wird für den ersten Codeblock ausgelöst, der nicht dynamisch erstellt wird. Aber jeder danach hinzugefügte Block fügt den Event Trigger nicht ein.

Irgendwelche Ideen?

Oh, und hier ist meine Bibliotheken, die ich benutze, wenn das etwas

<script type="text/javascript" src="media/js/jquery-3.1.1.min.js"></script> 
<link rel="stylesheet" href="media/css/bootstrap.css"> 
<script type="text/javascript" src="media/js/bootstrap.js"></script> 

Answer 1

$("body").on("click", '.dropdown-menu li > a', function(event) { 
}) 

Da das Element nicht existieren verursachen könnte, wenn das Skript ausgeführt, wird der Ereignis-Listener der Schaltfläche hinzugefügt .

Answer 2

Versuchen Sie, das gesamte Dokument auszuwählen, und wählen Sie Ihr Element nach dem "Klick" -Parameter.

$(document).on("click", ".dropdown-menu li > a", function(event){ 
    console.log("fire"); 
});