在Javascript中的ajax响应之后未调用Dropdown事件

Dropdown event not called after ajax Response in Javascript

本文关键字：调用 Dropdown 事件 之后 响应 Javascript 中的 ajax      更新时间：2023-09-26

这是我的代码：

$.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>

这就是我所拥有的HTML，它被绑定到ajaxResponse span:

<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响应。下拉列表格式良好，并附加到ajaxResponsediv中。下拉列表显示在开发人员工具浏览器控件中，格式良好。但是，下拉列表不会触发jQuery on change事件。我认为DOM已经加载，jQuery无法找到要激发的On更改事件的ID。意思是：

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

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

每次在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());
        });
    }
    });

试试这个：

$.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");
});

试试这个：

jQuery 1.7以后使用"on"，对于以前的版本，您可以使用"live"

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

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

相关文章：