Случаи прослушивания событий несколько раз в JavaScript

Question

Я пытаюсь получить список каталогов, уровень за уровнем, используя 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» его следует заменить на «home» и «work». После нажатия «домой» - «я», «работа» - «жесткий» и «она».

я написал:
CodepenCode

и он работает только один раз, только при нажатии на "тест".

Answer 1

Просто повторите прослушивание после того, как каталоги были нарисованы. Вы связываете их только один раз, поэтому они работают только один раз.

Wrap функция связывания в именованной функции:

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

Demo.

Answer 2

Если кому-то интересно о создании из структуры данных:

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