Присоединение evt слушателя к динамически созданному классу

Question

У меня есть код, который динамически добавляет один элемент JSON в каждый столбец.Когда достигается четвертый столбец, появляется цикл, и элемент снова помещается в первый столбец:

first | second | third | fourth |
fifth | sixth  |seventh| 

И когда элемент создается, класс динамически добавляется к каждому элементу.

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

Проблема, с которой я столкнулся, заключается в том, что когда мой .click() помещается в цикл (для доступа к селектору классов), данные JSON отображаются неоднократно (что неудивительно).Помещение .click() вне цикла приводит к тому, что значение JSON "Category" будет равно undefined.

. Как я могу:

A. Сохранить .click внутри петли, не допуская воздействия петли на нее и только на нее.

- или -

B. Во время выполнения выведите .click снаружи петлираспознанное значение JSON.

Фрагмент JS:

var testjson = {
  "d": {
    "results": [{
      "Title": "Aardvark",
      "Category": "Animals",
      "Description": "My Test description",
      "TopTrainingCourse": false,
      "ID": 1,
      "Modified": "2019-03-05T20:13:46Z",
      "Created": "2019-03-05T20:13:36Z"
    }, {
      "Title": "Red Panda",
      "Category": "Animals",
      "Description": "Donec id dictum sem",
      "TopTrainingCourse": true,
      "ID": 10,
      "Modified": "2019-03-06T21:08:25Z",
      "Created": "2019-03-06T21:08:25Z"
    }, {
      "Title": "Tennis",
      "Category": "Sports",
      "Description": "Mauris sagittis ligula",
      "TopTrainingCourse": true,
      "ID": 11,
      "Modified": "2019-03-06T21:08:35Z",
      "Created": "2019-03-06T21:08:35Z"
    }]
  }
}

export default class {
    constructor() {
    }

    loadTopCourses() {
        let arrTop = testjson.d.results
            .filter(x => x.TopTrainingCourse === true)
            .filter((el, idx, self) => { // no duplicates
                return (idx === self.map(el => el.Category).indexOf(el.Category))
            })
            .map(x => {
                return {
                    "Category": x.Category,
                    "Title": x.Title
                }
            });

        var curIndex = 0;
        $.each(arrTop, function(idx, val) {
            curIndex += 1;

            $("div.top-training-div > div[col='" + curIndex + "']")
                .append("<div data-toggle=\"modal\" data-target=\"#modal-id\" class=\"categoryName\">" + "<span class='triangle-right'>&blacktriangleright;</span>" + val.Category + "</div>")
                // .click(function() { // -------- this renders modal data but the data's affected by the loop
                //     $(".modal-title").append(val.Category) 
                // })

            if(curIndex == 4) {
                curIndex = 0;
            }

        })

        $(".categoryName").click(function(e) { // -------- does not recognize `Category`
            $(".modal-title").append(e.Category)
            console.log(e.Category)
        })

    } // ------------------ loadTopCourses

}

Модальный:

<div class="modal fade" id="modal-id" role="dialog" >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">CLOSE</span> <!-- &times; -->
          </button>
        </div>
        <div class="modal-body">
          <div class="category-desc"></div>
          <ul class="training-titles"></ul>
        </div>
      </div>
    </div>
</div> <!-- modal fade -->

---

Обновление:

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

        var curIndex = 0;
        $.each(arrTop, function(idx, val) {
            let targetDiv = $("div.top-training-div > div[col='" + curIndex + "']");

            let modalTrigger = $('<div />', {
                'data-toggle': 'modal',
                'data-target': '#modal-id',
                'data-category': val.Category,
                'class': 'categoryName',
                'text': val.Category
            });

            // let triangleRight = $('<span />', {
            //     'class': 'triangle-right',
            //     'text': '&blacktriangleright;'
            // });

            // modalTrigger.append(triangleRight);

            targetDiv.append(modalTrigger);

            curIndex++;

            if(curIndex == 4) {
                curIndex = 0;
            }

        })

        $(document).on('click', '.categoryName', function () {
            $('.modal-title').append($(this).data('category'));
            console.log($(this).data('category'));
        });

    } // ------------------ loadTopCourses

}

Answer 1

Если вы добавляете элементы в dom динамически, удалите ваш .click из цикла и попробуйте изменить обработчик события click на этот. Я также исправил способ добавления элементов .categoryName.

var curIndex = 0;
$.each(arrTop, function (idx, val) {
    var targetDiv = $("div.top-training-div > div[col='" + curIndex + "']");

    var modalTrigger = $('<div />', {
        'data-toggle': 'modal',
        'data-target': '#modal-id',
        'data-category': val.Category,
        'class': 'categoryName'
    });

    var triangleRight = $('<span />', {
        'class': 'triangle-right',
        'text': '&blacktriangleright;'
    });

    modalTrigger.append(triangleRight);

    targetDiv.append(modalTrigger);

    curIndex++;
    if (curIndex == 4) {
        curIndex = 0;
    }

});

$(document).on('click', '.categoryName', function () {
    $('.modal-title').text($(this).data('category'));
    console.log($(this).data('category'));
});