JQuery-Ereignisbindung, die überschreibt

Question

Ich versuche, Ereignisse an Entitäten innerhalb einer bestimmten for-Schleife innerhalb einer for-Schleife zu binden.

Grundsätzlich ist es eine for-Schleife innerhalb einer for-Schleife und die Methoden binden. Aber mein Problem ist, dass, wann immer ich mit der Methode der inneren Schleife zuerst interagieren, dann die äußere Schleife implementiert Methode, dann nur die äußere Schleife implementiert Methode funktioniert und die innere Ebene implementiert Methode wird nicht mehr funktionieren.

Das gleiche geschieht, wenn ich mit der implementierten Methode der äußeren Schleife interagiere, wo nur diese Methode funktionieren würde und die implementierte Methode der inneren Schleife überhaupt nicht funktionieren würde. Das habe ich bisher versucht:

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

Irgendeine Idee, was ich hier falsch mache?

Answer 1

Ich nehme an, dass Sie hier jQuery verwenden. Sehen Sie, ob der folgende Code für Sie funktioniert. (Änderte deinen Code).

BTW, hat diesen Code nicht getestet. Hoffe es funktioniert: 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);