javascript - 将 evt 监听器附加到动态创建的类

Question

我有一些代码可以动态地将一个 JSON 元素添加到每一列。当到达第四列时，出现一个循环，并再次将一个元素放入第一列中:

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

当创建一个元素时，一个类会动态添加到每个元素。

我想添加一个事件监听器，单击一个元素会打开一个模式窗口，该窗口还加载一些 JSON 数据——即列中显示的数据会显示在模式中，具体取决于单击的元素。

我遇到的问题是，当我的 .click() 放置在循环内(以访问类选择器)时，JSON 数据会重复呈现(这并不奇怪)。将 .click() 放置在循环之外会导致“Category”的 JSON 值未定义。

我怎样才能:

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

<小时/>

更新:

单击类别会打开模式并在模式中显示该类别，但单击第二个类别会将第二个类别附加到第一个类别 - 这里是 screenshot这比我能言善辩多了。

        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 并尝试将您的点击事件处理程序更改为此。我还清理了您附加 .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'));
});