html onchange事件不會從ajax生成的下拉列表中調用

Question

我有一個ajax生成的下拉列表。當列表生成時，將其發送回如下所示的HTML。 但是，HTML方面onchange（）事件似乎沒有啓動。我怎樣才能得到這個工作？

function listSess(){ 
var name = document.getElementById("studentID").value; 

$.ajax({ 
    url : "<%=context%>/ListSessionsServlet?name=" + name, 
    type : "POST", 
    async : false, 
    dataType: "json", 
     success : function(data) { 
      var toAppend = ''; 
      $.each(data,function(i,o){ 

       toAppend += '<option>'+o.sessid+'</option>'; 
      }); 

     $('#sessid') 
      .find('option') 
      .remove() 
      .end() 
      .append(toAppend); 

     } 
}); 
} 


<select id="sessid" name="sessid" onchange="listStudents();"> <--onchange not working when getting ajax generated list 
</select> 

Answer 1

如果綁定使用，而不是直列作爲標籤屬性的jQuery的變化時，您可以使用jQuery在AJAX回調觸發它：

// Hook up the change event on DOM ready 
$(function() { 
    $('#sessid').change(function() { 
     listStudents(); 
    }); 
}); 

function listSess(){ 
var name = document.getElementById("studentID").value; 

$.ajax({ 
    url : "<%=context%>/ListSessionsServlet?name=" + name, 
    type : "POST", 
    async : false, 
    dataType: "json", 
     success : function(data) { 
      var toAppend = ''; 
      $.each(data,function(i,o){ 
       toAppend += '<option>'+o.sessid+'</option>'; 
      }); 

     $('#sessid') 
      .find('option') 
      .remove() 
      .end() 
      .append(toAppend); 

     $('#sessid').change(); // fire change 
     } 
}); 
} 

<select id="sessid" name="sessid"></select> 

您當前的邏輯構建了新的<options>如果沒有value屬性，它們可能無法正常工作。下面是我可能會改變它：

... 
success : function(data) { 
    var $sessid = $('#sessid'); 
    $sessid.find('option').remove(); 
    $.each(data, function (index, item) { 
     $sessid.append($('<option />').val(item.sessid).text(item.sessid)); 
    }); 
    $sessid.val(data[0].sessid).change(); 
} 
...