监听来自动态创建的组件的事件
本文关键字:组件 事件 创建 动态 监听 | 更新日期: 2023-09-27 18:17:09
我正在开发一个c# MVC 5应用程序。特别是有一个页面具有一个引导手风琴样式的类别列表,其中每个类别都有一个隐藏的项目列表,当单击(展开)类别时显示该列表。这些组件(类别和项)旁边都有一个复选框。我在服务器端实现了一些繁琐的东西,当一个类别下的所有项目都被选中时,类别本身也会被选中。有点像"检查这个类别中的所有项目"的功能。我现在正试着做客户端;用户检查类别,并自动检查该类别下的所有项目。困难的部分是,这些类别及其相关项是根据应用程序在数据库中找到的内容动态呈现的。
。(这只是一个示例切片来说明我的问题)
@*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提供这个事件监听器或类似的…
我肯定有人遇到过这样的事情。我缺乏经验,不幸的是,我已经达到了理解力的极限。
最贴心的问候
对于动态添加的组件,如果您需要处理事件,则需要以不同的方式处理,通过将事件附加到正在添加新组件的页面上的一个静态组件上。
这种类型的事件称为委托事件。
$(document).on('change', '<selector>', function(event) {
//process the event
});
这里的<selector>
应该是元素的选择器,该元素将成为新元素的父标记。
更多信息请访问jquery
论坛
参考:http://api.jquery.com/on/
.on
目前仅适用于现有项目
如果您想将事件绑定到所有新创建的项目,您需要使用.delegate()