javascript не добавляется click
Страница в браузере загружает с C# http сервера список папок и файлов с компа и формирует ul список, разделяя список на страницы. На каждом элементе обработчик клика для перехода в папку или открытия файла.
Если страница > 1 то вначале добавляется кнопка "UP", аналогично если не последняя то внизу добавляется кнопка "DOWN" и соответсвующие обработчики для перелистывания. Проблема в том что на кнопку "UP" обработчик не вешается, хотя try catch не показывает никаких ошибок. Клик на остальных элементах и кнопке DOWN работает нормально. В чем может быть проблема?
Код:
function getFolderContent(){
fetch(url+"/?do=openDir&path="+currentDirBrowserPath+"&page="+page)
.then((response)=>{
p_arr=currentDirBrowserPath.split(/\/|\\/)
s=[]
for(let i=0;i<p_arr.length-1;i++){
s.push("<div class='folder-path-part'"+(i<p_arr.length-2?" data-path='"+p_arr.slice(0,i+1).join("/"):"")+"'>"+p_arr[i]+"</div>")
}
document.querySelector("#dialogPath").innerHTML=s.join("/")
document.querySelectorAll(".folder-path-part").forEach((item)=>{
item.addEventListener("click",function(){
page=1;
currentDirBrowserPath=item.dataset.path+"/"
getFolderContent()
})
})
response.json().then(function(data){
document.querySelector("#dialogContent").innerHTML="";
let items=data.items;
page=data.page,
totalPages=data.totalPages;
/* проблема только тут */
if(page>1){// UP
// пробовал и такой вариант. не работает
// let li=document.createElement("li")
// li.className="dirPrevPage"
// li.innerText="UP"
// li.addEventListener("click",function(){
// page--;
// getFolderContent()
// })
// document.querySelector("#dialogContent").append(li)
document.querySelector("#dialogContent").innerHTML+="<li class='dirPrevPage'>UP</li>"
document.querySelector(".dirPrevPage").addEventListener("click",function(){
page--;
getFolderContent()
})
}
/* ********* */
items.forEach(item=>{
n=item.name.split(/\/|\\/).slice(-1).pop()
document.querySelector("#dialogContent").innerHTML+=
"<li class='fileBrowserListItem "+item.type+"' data-path='"+item.name+"'>"+n+"</li>"
})
if(page<totalPages){// DOWN
document.querySelector("#dialogContent").innerHTML+="<li class='dirNextPage'>DOWN</li>"
document.querySelector(".dirNextPage").addEventListener("click",function(){
page++;
getFolderContent()
})
// let li=document.createElement("li")
// li.className="dirNextPage"
// li.innerText="DOWN"
// li.addEventListener("click",function(){
// page++;
// getFolderContent()
// })
// document.querySelector("#dialogContent").append(li)
}
document.querySelector("#dialogContent").scrollTop=0
document.querySelectorAll(".fileBrowserListItem.dir").forEach((item)=>{
item.addEventListener("click",function(){
document.querySelector("#dialogUpButton").setAttribute("data-path",currentDirBrowserPath)
page=1;
let p=item.dataset.path;
currentDirBrowserPath=p+"/";
getFolderContent();
})
})
document.querySelectorAll(".fileBrowserListItem.file").forEach((item)=>{
item.addEventListener("click",function(){
let p=item.dataset.path;
let f=new FormData();
f.append("openFile",p)
fetch(url,{method: 'POST',body:f})
})
})
})
})
}