javascript - JQuery 事件绑定(bind)被覆盖

Question

我正在尝试将事件绑定(bind)到 for 循环内某个 for 循环内的实体。

基本上，它是一个 for 循环内的一个 for 循环，并且方法确实绑定(bind)。但我的问题是，当我首先与内循环实现的方法交互时，然后与外循环实现的方法交互，那么只有外循环实现的方法可以工作，而内层实现的方法将不再工作。

如果我开始与外部循环实现的方法交互，也会发生同样的情况，其中只有该方法可以工作，而内部循环实现的方法根本不起作用。这是我到目前为止所尝试过的:

var tree = document.getElementById('tree');

for (var i in result) {
  if (result[i].children) {
    // fill outer layer entities with children
    tree.innerHTML +=
      '<div id="layer_one_title_' + [i] + '" class="title">' +
      '<i class="dropdown icon"></i>' +
      '<i class="folder icon"></i>' + result[i].text +
      '<i class="plus icon lev_one_add" ></i>' +
      '</div>' +
      '<div id="layer_one_content_' + [i] + '" class="content active"></div>';

    $('#layer_one_title_' + [i]).on('click', '.lev_one_add', function(event) {
      newFirstNode(result[i], event);
    });

    let layer_one_content = document.getElementById('layer_one_content_' + [i]);
    for (var j in result[i].children) {
      if (result[i].children[j].children) {
        // fill inner layer entities with children
        layer_one_content.innerHTML +=
          '<div id="layer_one_' + [i] + '_' + [j] + '" class="accordion layer_one">' +
          '<div id="layer_two_title_' + [i] + '_' + [j] + '" class="title">' +
          '<i class="dropdown icon"></i>' +
          '<i class="folder icon"></i>' + result[i].children[j].text +
          '<i class="plus icon lev_two_add"></i>' +
          '</div>' +
          '<div id="layer_two_content_' + [i] + '_' + [j] + '" class="content active"></div>' +
          '</div>';

        $('#layer_two_title_' + [i] + '_' + [j]).on('click', '.lev_two_add', function(event) {
          newFirstNode(result[i], event);
        });

知道我在这里做错了什么吗？

Answer 1

我假设您在这里使用 jQuery。看看下面的代码是否适合您。 (更改了您的代码)。

顺便说一句，没有测试这段代码。希望它有效:P

// Note: Trying my best to prevent binding events and injecting html within a loop.

// Find the parent element first.
let $tree = $("#tree");

// Bind a delegate event on to the parent for a child click.
$tree.on('click', ".lev_one_add", result, function (event) {
    let $self = $(this);
    let result = event.data; // Access the data passed when binding this event (third param in this event statement).
    let index = $self.data("index"); // Access the index which was set as an attribute in the html format ("data-index").

    newFirstNode(result[index], event);
});

$tree.on('click', '.layer_two_container .lev_two_add', result, function (event) {
    let $self = $(this);
    let result = event.data; // Access the data passed when binding this event (third param in this event statement).
    let parentIndex = $self.data("pindex"); // Access the index which was set as an attribute in the html format ("data-pindex").
    let index = $self.data("index"); // Access the index which was set as an attribute in the html format ("data-index").

    if (result[parentIndex] && result[parentIndex].children[index]) {
        newSecondNode(result[parentIndex], event);
    }
});


let htmlChilds = "";
for (var i in result) {
    if (result[i].children) {
        // Append the html as a string all at once instead of injecting each html child at a time.
        // (This way is performance efficient)
        htmlChilds +=
            '<div id="layer_one_title_' + [i] + '" class="title">' +
            '<i class="dropdown icon"></i>' +
            '<i class="folder icon"></i>' + result[i].text +

            // Added an attribute "data-index" to hold the index.
            '<i class="plus icon lev_one_add" data-index="' + [i] + '" ></i>' +
            '</div>' +

            // Open the .layer_two_container div.
            '<div id="layer_one_content_' + [i] + '" class="content active layer_two_container">';


        for (var j in result[i].children) {
            if (result[i].children[j].children) {
                htmlChilds +=
                    '<div id="layer_one_' + [i] + '_' + [j] + '" class="accordion layer_one">' +
                    '<div id="layer_two_title_' + [i] + '_' + [j] + '" class="title">' +
                    '<i class="dropdown icon"></i>' +
                    '<i class="folder icon"></i>' + result[i].children[j].text +

                    // Added attributes "data-pindex" and "data-index" to hold indexes of parent and child.
                    '<i class="plus icon lev_two_add" data-pindex="' + [i] + '" data-index="' + [j] + '"></i>' +
                    '</div>' +
                    '<div id="layer_two_content_' + [i] + '_' + [j] + '" class="content active"></div>' +
                    '</div>';
            }
        }

        // Close the .layer_two_container div.
        htmlChilds += '</div>';
    }
}

// Inject the children html into the parent node.
$tree.html(htmlChilds);