加载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");        
});

这是因为您在#change选择器上添加了动态内容。

Answer 2

我很确定它不能工作，因为你绑定了click事件。

如果您在触发文档就绪事件之后发送xmlhttp请求，那么您已经将click事件绑定到'#demo-2'，而‘#demo-2’还没有。我非常确定您需要将绑定推迟到将元素插入到dom中之后。

没问题。如果Hackerman的解决方案有效，它比我想的更优雅，而且老实说，是正确的。但是，如果不是这样:我在想，您应该等到绑定之后

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

这样内容就被加载到dom中，然后click事件就被绑定了。

// Just for simplicity, I'm pretending your xml is returned from the function
var xml = loadxml();
myFunction(xml);
// Now, bind your click event to the new element