html onchangeイベントがajaxによって生成されたドロップダウンリストから呼び出されない

Question

私はajaxで生成されたドロップダウンリストを持っています。リストが生成されると、それは以下のようにHTMLに返されます。 しかし、HTML側のonchange（）イベントは起動していないようです。これをどのように動作させることができますか？あなたが代わりにタグ属性として、インラインでのjQueryを使用して変更イベントをバインドする場合

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

、あなたのAJAXコールバックでjQueryを使ってそれをトリガすることができます：

// 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(); 
} 
...