Javascript中的ajax响应后未调用下拉事件

Question

这是我的代码：

 $.ajax({ url: "server.do?button=go&flag=false", type: "GET", success: function(data) { var respContent = ""; respContent += data; $("#ajaxResponse").show(); $("#ajaxResponse").html(data); } }); 

 <span id="ajaxResponse" style="display:none"></span> 

这是我绑定到ajaxResponse span的HTML：

 <span style="" id="ajaxResponse"><select tabindex="12" id="aId" name="aId"><option value="ANY">ANY</option><option value="1">ABC</option><option value="2">XYZ</option></select></span> 

如上所示，我正在从服务器发回HTML响应以进行下拉。 下拉列表格式正确，并附加到了ajaxResponse div中。 出现下拉列表，该下拉列表在开发人员工具浏览器控件中的格式正确。 但是，下拉列表并不会在发生更改事件时触发jQuery。 我认为DOM已经加载并且jQuery无法找到触发on change事件的ID，这意味着：

  $("#aId").change(function(e) { //How do i fire this event ?? alert('I am never called'); }); 

我的问题是如何为服务器端发送的下拉列表调用上述函数？

Answer 1

尝试这个 ：

$.ajax({
    url: "server.do?button=go&flag=false",
    type: "GET",
}).done(function (data) {
    var respContent = "";
    respContent += data;
    $("#ajaxResponse").show();
    $("#ajaxResponse").html(data);
})
.fail(function () {
    console.log("error");
});

Answer 2

尝试这个：

jQuery 1.7及更高版本使用“ on”，对于以前的版本，您可以使用“ live”

$(document).on('change','#aId', function(e) { //How do i fire this event ?? alert('I am never called'); });

准备好文档后，元素（#aId）不可用，因此不会分配更改事件，因此我们需要动态绑定更改事件。

Answer 3

每次在ajax响应后呈现它时，都必须以这种方式绑定事件处理程序（以下示例）：

$.ajax({
    url: "server.do?button=go&flag=false",
    type: "GET",
    success: function(data) {
        var respContent = "";
        respContent += data;
                    $("#ajaxResponse").show();
        $("#ajaxResponse").html(data);
        // add a event handled for 'change' every time you render it
        $("#aId").change(function(e) {
           var select = $(this);
           console.log('this should work.',select.val());
        });
    }
    });