如何調用選擇索引更改爲選擇元素使用JavaScript？

Question

我創建動態地使用javascript這樣的代碼

typehtml = '<select id="select"><option value="first">All  </option>'; 
$.ajax({ 
    type: 'POST', 
    url: 'web service url', 
    data: "web service parameters", 
    dataType: 'xml', 
    success: function(response) { 
     $(response).find('IssueType').each(function() { 

      var namei = $(this).find('Name').text(); 
      var id = $(this).find('Id').text(); 


      typehtml += '<option value="' + id + '" >' + namei + '</option>'; 

     }); 
     typehtml += '</select>'; 
     document.getElementById("typediv").innerHTML = typehtml; 


    }, 
    error: function(error) { 
     alert(error); 
    } 
}); 

一個選擇元件，我分配此選擇元件所選擇的索引改變這樣

$(function() { 
    $("#select").change(function() { 
     var selected = $(this).val(); 

    }); 
}); 

但是當我選擇一個值該函數並不火，有人知道爲什麼嗎？

Answer 1

對於動態添加的元素，請使用on事件委派。

$(function() { 
    $('#typediv').on('change', '#select', function() { 
     var selected = $(this).val(); 

    }); 
}); 

Answer 2

您正在嘗試結合的元素的函數，而不是在頁面上存在，你需要稍微改變你的代碼下面給出：

typehtml = '<select id="select"><option value="first">All  </option>'; 
 
$.ajax({ 
 
    type: 'POST', 
 
    url: 'web service url', 
 
    data: "web service parameters", 
 
    dataType: 'xml', 
 
    success: function(response) { 
 
     $(response).find('IssueType').each(function() { 
 

 
      var namei = $(this).find('Name').text(); 
 
      var id = $(this).find('Id').text(); 
 

 

 
      typehtml += '<option value="' + id + '" >' + namei + '</option>'; 
 

 
     }); 
 
     typehtml += '</select>'; 
 
     document.getElementById("typediv").innerHTML = typehtml; 
 
     //here you have to assign the function 
 
    \t  $("#select").change(function() { 
 
     \t //code goes here.. 
 
    \t }); 
 

 
    }, 
 
    error: function(error) { 
 
     alert(error); 
 
    } 
 
});