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

Question

我有Layout page名为Layout.cshtml 在该页面上，我有div，其ID为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
});

但这不起作用。我试过调试它。我使用了断点，但这个事件从未执行过。

Answer 1

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

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

Answer 2

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

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

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

的后代元素

Answer 3

活动代表我的朋友：

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