JQuery事件綁定獲取覆蓋

Question

我試圖將事件綁定到某個for循環內for循環內的實體。

基本上它是for循環內的for循環，並且方法綁定。但我的問題是，當我首先與內部循環實現的方法進行交互時，然後執行外部循環實現的方法，那麼只有外部循環實現的方法會工作，內部級別實現的方法不再工作。

如果我開始與外部循環實現的方法進行交互，其中只有該方法可行並且內部循環實現的方法完全不起作用，則會發生同樣的情況。這是我到目前爲止所嘗試的：

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