我正在尝试将事件绑定到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);
});
知道我在这里做错了吗?
答案 0 :(得分: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);