2015-10-12 54 views
0

我正在研究C#MVC 5应用程序。其中一页尤其具有引导式手风琴风格的类别列表,每个类别都有一个隐藏的项目列表,这些项目在单击该类别(展开)时显示。这些组件(类别和项目)每个都在其旁边有一个复选框。我已经实现了一些服务器端的巨无霸,当一个类别下的所有项目都被选中时,类别本身也被检查。排序“检查此类别中的所有项目”功能。我现在正在努力做这个客户端;用户检查类别并自动检查其下的所有项目。困难的部分是这些类别及其关联的项目是根据应用程序在数据库中找到的内容动态呈现的。从动态创建的组件监听事件

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

简而言之就是这样。我知道我可以像添加IDS上述复选框:

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

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

我需要某种形式的jQuery魔法,希望和祈祷!

我知道监听复选框的变化使用:

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

但上述情况是伤害我的大脑,我不知道是什么ID,并将该事件监听器或种类喜欢它...

我敢肯定,有人在那里遇到过类似的情况。我很缺乏经验,不幸的是已经达到了我理解的边缘。

最亲切的问候

回答

1

动态添加的组件,如果你需要的事件连接到处理那么事件就需要进行不同的处理,一个是您的页面上的静态组件,在这个组件上添加新组件。

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

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

<selector>这里应该是这将是新元素的父标签元素的选择。

更多信息可以在jquery论坛

参考中找到:http://api.jquery.com/on/

0

.on只对存在的项目现在。

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