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

Question

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

这是jQuery点击xml加载和切换

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

加载xml函数：

    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

我很

确定它不起作用，因为当您绑定单击事件时。

如果在触发文档就绪事件后发送 xmlhttp 请求，则已将单击事件绑定到"#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