javascript - ajax xml 加载后 jQuery 切换不起作用

Question

我似乎无法弄清楚为什么在我的 ajax xml 加载后切换不起作用。它正确地提取 xml。但是，无法执行切换。

这是 jQuery onclick 的 xml 加载和切换

      $("document").ready(function(){

           $("#demo").on("click", loadxml);
           $("#demo-2").click(function(){
              $("li").toggle("fast");        
          });
        });

loadxml 函数:

    function loadxml(){
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function(){
         if (xhttp.readyState == 4 && xhttp.status == 200) {
             myFunction (xhttp);
          }
    };
    xhttp.open("GET","xml/categories.xml", true);
    xhttp.send();
}

 function myFunction(xml){
      var i;
      var xmlDoc = xml.responseXML;
      var list = '<ul id="demo-2" class="list-unstyled no-bullet"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> Categories';
     var x = xmlDoc.getElementsByTagName("Categories");

  for(i=0; i<x.length; i++) {
        list += '<li><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>' +  x[i].getElementsByTagName("CategoryName")[0].childNodes[0].nodeValue + "</li>";
}

list += "</ul>"

document.getElementById("change").innerHTML = list;

}

这是 html:

        <div class="container" id="change">
             <ul id="demo"></ul>
         </div>

Answer 1

此代码:

$("#demo-2").click(function(){
   $("li").toggle("fast");        
});

应该是:

$("#change").on('click','#demo-2',function(){
   $("li").toggle("fast");        
});

Thats because your are adding dinamic content on your #change selector.