jquery - 当用户使用 JQuery 更改选择选项上的选择时执行某些操作

Question

我有一个Layout page叫Layout.cshtml 在那个页面上我有一个divID 是friendsList

我有一个View叫Users.cshtml 在那个页面上我有一个select tag它的 ID 是AllowedFriends它的值来自数据库

现在，我需add要这样做AllowedFriends，friendsList所以我编写了如下的 JQuery

$("#friendsList").append($("#AllowedFriends"));

到这里还好。

user changes the selection现在我想在打开时显示警报或做某事AllowedFriends。

所以我写的JQuery如下：

$("#AllowedFriends").change(function () {
 // do something
});

但这不起作用。我试图调试它。我使用了断点，但这个事件永远不会执行。

score 1 · Accepted Answer

活动委托我的朋友：

$("#friendsList").on("change", "#AllowedFriends", function () {
    // do something
});

score 1 · Accepted Answer

由于您之后创建了元素，因此您需要使用ON

$(document).on("change", "#AllowedFriends", function(){
 // do something
});

score 1 · Accepted Answer

您需要确保您的事件处理程序已绑定到该元素，即使在声明处理程序时它在 DOM 中尚不存在。这最好通过处理document对象来实现，因为我们确信它在事件处理程序声明时始终存在：

 $(document).on("change", "#AllowedFriends", function(){
     //Glorious code!
  });

这是event delegation，简单来说，这意味着 DOM 树上的元素会侦听从其后代冒出的事件（在这种情况下，document正在侦听 ID 为的后代元素上的更改事件#AllowedFriends

3 回答 3