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而不是内联作为标记属性绑定change事件，则可以在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();
}  
...

未从ajax生成的下拉列表中调用html onchange事件

1 个答案: