如何修復“jquery附加一些東西，但它的javascript函數不能正常工作按鈕的點擊事件”

Question

當我在按鈕點擊事件上使用jQuery追加“多個標簽下拉列表”時，它不會附加多個標簽下拉列表，而是簡單下拉（我想我需要在追加后重新加載javascript文件）。 因為，當我在jquery（document）.ready（function（）{}）上添加相同的東西時，它會附加多個標記下拉列表以及工作的javascript功能。

 jQuery(document).ready(function() {

   //this work perfectly in .ready() function

  $("#parent").append(' <select  class="standardSelect"><option>hello</option><option>hello</option> </select>');

$('#sa').attr('multiple','');




//but on button click event it just append the simple dropdown of html without any javascript functionality of tags.
$( "#mybutton" ).click(function() {



//$("#parent").append(' <select  class="standardSelect"><option>hello</option<option>hello</option> </select>');

)};//click()
)};//ready()

Answer 1

一旦修復了語法錯誤，一切正常

 jQuery(document).on('change', '.standardSelect', function() { console.log('selected ' + jQuery(this).val()) }) jQuery(document).ready(function() { //this work perfectly in .ready() function $("#parent").append(' <select class="standardSelect"><option>hello</option><option>hello</option> </select>'); $('#sa').attr('multiple',''); //but on button click event it just append the simple dropdown of html without any javascript functionality of tags. $( "#mybutton" ).click(function() { $("#parent").append(' <select class="standardSelect"><option>hello</option><option>hello</option> </select>'); });//click() });//ready() 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="parent"> </div> <button id="mybutton">Test</button> 

這是一個工作的代碼

要綁定事件處理程序以動態創建元素，這意味着在加載文檔時不存在的元素，您需要將處理程序綁定到父元素：

jQuery(document).on('change', '.standardSelect', function() {
  console.log('selected ' + jQuery(this).val())
})

在這個例子中，我使用了自己的文檔，這是所有內容的父級。