监听来自动态创建的组件的事件答案

【问题标题】：Listen for events from dynamically created components监听来自动态创建的组件的事件
【发布时间】：2016-01-09 15:46:35
【问题描述】：

我正在开发一个 C# MVC 5 应用程序。特别是一个页面有一个引导手风琴风格的类别列表，每个类别都有一个隐藏的项目列表，当类别被单击（展开）时显示。这些组件（类别和项目）旁边都有一个复选框。我已经实现了一些服务器端 mumbo-jumbo，当一个类别下的所有项目都被检查时，该类别本身也被检查。类似于“检查此类别中的所有项目”功能。我现在正在尝试做这个客户端；用户检查类别并自动检查其下的所有项目。困难的部分是这些类别及其相关项目是根据应用程序在我们的数据库中找到的内容动态呈现的。

例如（这只是一个示例切片来说明我的问题）

@*some div stuff*@
@foreach (var category in Model.Categories)
{
  @*here I have a way to get a unique id for this category*@
  @*some divs and headers go here*@
  @Html.CheckBoxFor(d => category.IsChecked)
  @*some other headers like name, description, etc*@
  @*also code to handle the accordion-style collapsing/expanding*@

  @if (category.Items.Any())
  {
    @*some div stuff here*@
    @foreach (var item in category.Items)
    {
      @*some div and header stuff here*@
      @Html.CheckBoxFor(d => item.IsChecked)
      @*some other headers like name, description, etc*@
    }
  }
}

简而言之就是这样。我知道我可以在上面的复选框中添加 id，例如：

@Html.CheckBoxFor(d => category.IsChecked, new {id = @categoryId})

其中 categoryId 是该类别的唯一标识符，但由于每个标识符不同，我无法弄清楚如何监听其事件。

我需要某种 jQuery 魔法、希望和祈祷！

我知道使用以下方法监听复选框更改：

$(document).on('change', '#someId', function(s, e) {
      alert('alert!');
    });

但上述情况让我很头疼，因为我不知道要为这个事件侦听器提供什么 id 或类似的类型......

我敢肯定有人遇到过这样的事情。我相当缺乏经验，不幸的是已经达到了我理解的边缘。

最诚挚的问候

【问题讨论】：

标签： javascript c# jquery twitter-bootstrap asp.net-mvc-5

【解决方案1】：

对于动态添加的组件，如果您需要处理事件，则需要进行不同的处理，方法是将事件附加到页面上正在添加新组件的静态组件中。

这种类型的事件称为委托事件。

$(document).on('change', '<selector>', function(event) { //process the event });

这里的<selector>应该是元素的选择器，它将成为新元素的父标签。

更多信息可以在jquery论坛找到

参考：http://api.jquery.com/on/

【讨论】：

【解决方案2】：

.on 现在只适用于存在的项目。

如果要将事件绑定到所有新创建的项目，则需要使用.delegate()

【讨论】：