Слушайте события от динамически созданных компонентов

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

Это все в двух словах. Я знаю, что я мог бы добавить идентификаторы в вышеуказанных флажки, как:

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

Где CategoryId является уникальным идентификатором для этой категории, но каждый идентификатор отличается, я не могу понять, как слушать его событие.

Мне нужна какая-то магия jQuery, надежда и молитва здесь!

Я знаю прослушивает флажок изменения с помощью:

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

Но вышеупомянутая ситуация вредит мой мозг, как я не знаю, что идентификатор, чтобы поставить этот слушатель события или виды, как это ...

Я уверен, что кто-то там встретил нечто подобное. Я довольно неопытный и, к сожалению, дошел до моего понимания.

сердечного привет

Answer 1

Для динамически добавленных компонентов, если вам нужно обрабатывать события, то ему требуется, чтобы обрабатываться по-разному, закрепив события один статический компонент на вашей странице, в котором будут добавлены ваши новые компоненты.

этот тип событий называется делегированными событиями.

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

The <selector> здесь должен быть селектор элемента, который будет родительский тег для новых элементов.

Более подробную информацию можно найти на форуме jquery

Ссылка: http://api.jquery.com/on/

Answer 2

.on только для элемента существует сейчас.

Если вы хотите связать событие для всех новых созданного элемента, вам нужно использовать .delegate()