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选择器上添加了dinamic内容。

Answer 2

我很确定它不起作用，因为你绑定了点击事件。

如果您在文档就绪事件被触发后发送了xmlhttp请求，那么您已经将点击事件绑定到＃demo;＃demo＆2＆＃39;，这还没有。我很确定你需要推迟绑定，直到你将元素插入到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

在ajax xml加载

2 个答案: