javascript - 监听来自动态创建的组件的事件

Question

我正在开发 C# MVC 5 应用程序。特别是一个页面有一个 Bootstrap Accordion 样式的类别列表，每个类别都有一个隐藏的项目列表，单击该类别(展开)时会显示这些项目。这些组件(类别和项目)旁边都有一个复选框。我已经实现了一些服务器端的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 或类似的类型......

我确信有人遇到过类似的事情。我相当缺乏经验，不幸的是已经达到了我理解的边缘。

最诚挚的问候

Answer 1

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

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

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

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

更多信息请访问jquery论坛

引用:http://api.jquery.com/on/