Question

我正在从一个名为＆＃34; data＆＃34;的对象数组中动态创建一个列表。对于数组中的每个元素，我创建了一个列表对象＆＃39; li＆＃39;有一个链接。这个清单将附加到名为＆＃34;信息＆＃34;的div中。在末尾。在创建链接时，我添加一个事件监听器，在点击时，将保存 div的当前内容，并将div的内容更改为有关我单击的列表项的一些附加信息（显示名称和状态）。它还添加了一个名为的按钮＆＃39; go_back＆＃39;使用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);

但是，当我第一次点击列表项时，这很有效，也就是说，它会更改div的内容，其中包含有关我单击的列表项的信息。点击＆＃39; go_back＆＃39;，div再次显示列表。但是，此后链接不再起作用。我尝试了类似问题的.on（）函数堆栈溢出通过为链接分配一个id，但这不起作用（我点击其中一个列表项，它会不断显示所有列表项的信息）。

P.S。我已经使列表可扩展和可折叠，其代码在最后一行之后。 go_back按钮能够恢复展开的确切状态和折叠的项目（传递true后，在克隆函数中为true）。我在使用.html（）而不是replaceWith（）时遇到了问题，因此没有使用.html（）。

关于我做错的任何想法？

Answer 1

通过使用.on函数修复此问题。由于我是javascript和jquery的新手，我不知道我可以在jquery中使用javascript变量。附上＆＃39; on＆＃39;功能在＆＃39;链接＆＃39;变量解决了问题！

动态创建的链接仅在使用replaceWith（）后才能工作一次

1 个答案: