Question

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

E.g。（这只是一个说明我问题的样本片段）

@*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

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

此类事件称为委托事件。

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

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

可以在jquery论坛

找到更多信息

<强>参考：http://api.jquery.com/on/

Answer 2

.on仅适用于现有项目。

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

从动态创建的组件中侦听事件

2 个答案: