動態創建的鏈接僅在使用replaceWith（）後工作一次

我從一組名爲「data」的對象動態創建一個列表。對於數組中的每個元素，我用鏈接創建一個列表對象'li'。這個名單將被附加到最後一個名爲「信息」的div。在創建鏈接時，我添加了一個事件監聽器，點擊後將保存div的當前內容並將div的內容更改爲有關我單擊的列表項的其他信息（顯示名稱和狀態）。它還添加了一個名爲 'go_back'的按鈕，該按鈕使用replaceWith（）函數恢復列表。動態創建的鏈接僅在使用replaceWith（）後工作一次

ul = document.createElement('ul'); 
ul.className = "list"; 

for(var i=0;i<data.length;i++) 
{ 
    var li,link,text; 
    li = document.createElement('li'); 
    text = document.createTextNode(data[i].name); 
    link = document.createElement('a'); 
    link.href = "#"+ data[i].name; 
    link.appendChild(text); 
    li.appendChild(link); 
    link.addEventListener("click", description, false); 
    ul.appendChild(li); 

    function description(){ 
    var $saved = $('#information').clone(true,true); 
    $("#information").html('<p>Name: ' + data[i].name + '</p>' + '<p>State: ' + data[i].state + '</p>' + '<p><button class="btn btn-danger" id="go_back">Go Back</button></p>'); 

    $('#go_back').on('click',function(){ 
     $("#information").replaceWith($saved);   
    }) 
    } 
} 
document.getElementById('information').appendChild(ul);

然而，這種效果很好，當我的列表項單擊第一次，即它在點擊「go_back」改變div的內容與該列表項目我點擊和的信息，該div再次顯示列表。但是，此後鏈接不再工作。我嘗試了.on（）函數，通過爲鏈接分配一個id來解決堆棧溢出中的類似問題，但這不起作用（我點擊其中一個列表項並且它不斷顯示所有列表項的信息）。

P.S.我已經把這個列表做成了可擴展和可摺疊的，代碼就是最後一行。 go_back按鈕能夠恢復展開的和摺疊項目的確切狀態（在傳遞true之後，在克隆函數中爲true）。使用.html（）而不是replaceWith（）時我遇到了問題，因此沒有使用.html（）。

關於我在做什麼錯的任何想法？

來源

2016-12-01 rj91

通過使用.on函數解決了這個問題。由於我是JavaScript和jquery的新手，我不知道我可以在jQuery中使用JavaScript變量。在'link'變量上附加'on'函數解決了這個問題！

來源

2016-12-02 12:50:50 rj91

動態創建的鏈接僅在使用replaceWith（）後工作一次

回答

相關問題