在JavaScript中多次绑定事件监听器

Binding event listeners multiple times in JavaScript

本文关键字：绑定 事件 监听器 JavaScript      更新时间：2023-09-26

我正在尝试使用JavaScript逐级获取目录列表。
我有这个paths数组作为输入

var _paths = [];
_paths.push("meta1/meta2/test/home/myself/hi.jpg");
_paths.push("meta1/meta2/test/home/myself/hi1.jpg");
_paths.push("meta1/meta2/test/home/myself/hi2.jpg");
_paths.push("meta1/meta2/test/work/she/100.jpg");
_paths.push("meta1/meta2/test/work/she/110.jpg");
_paths.push("meta1/meta2/test/work/she/120.jpg");
_paths.push("meta1/meta2/test/work/hard/soft/she/120.jpg");
_paths.push("meta1/meta2/test/work/hard/soft/she/121.jpg");
_paths.push("meta1/meta2/test/work/she/220.jpg");

和我想有一个"test"作为输出，这将是可点击的。点击"test"后，应替换为"home"answers"work"。点击"家"-"我自己"，点击"工作"-"努力"answers"她"。

我写了这个:
CodepenCode

，它只工作一次，只有当点击"test"

只需在绘制目录后重新绑定侦听器即可。你只绑定它们一次，因此它们只工作一次。

将绑定函数包装成一个命名函数:

function bindListeners(){
  $('.sub').click(function() {
    word = $(this).text();
    filteredArr = findString(_paths, word);
    drawList(filteredArr, word);
  });
}

并在drawList的末尾调用它:

var drawList = function (paths, word) {
  var folders = getFolders(paths, word);
  if (folders.length > 0) {
    $('.canvas').html('');
    for (i = 0; i < folders.length; i++) {
      $('.canvas').append("<div class='sub'>" + folders[i] + "</div><br />");
    }
  }
  bindListeners();
}

演示。

如果有人对构建数据结构感到好奇:

(function iteratePaths() {
  var dirs = [];
  for(var i = 0; i < _paths.length; i++) {
    buildDirectories(dirs, _paths[i].split('/'));
  }
})();
function findDir(dir, obj) {
  for(var i = 0; i < dir.length; i++) {
    if(dir[i].name === obj.name) { 
      return dir[i];
    }
  }
  return undefined;
}
function buildDirectories(dir, subs) {
  if(subs.length === 0) return;
  var obj = {name: subs.shift(), dirs: []};
  var existingDir = findDir(dir, obj);
  if(!existingDir) {
    dir.push(obj);  
  }
  buildDirectories((existingDir || obj).dirs, subs);
}
相关文章：