用xml填充jQuery UI手风琴，绑定问题

Question

我从简单的xml文件填充jQuery手风琴，我可以获取我的数据并将其附加为html来模拟手风琴标记。然后我要求手风琴，它不起作用！

我想问题是绑定新创建的数据到DOM，我试过.live（）和.delegate没有成功。

我该如何继续？

这里被简化例如我的代码（遗憾的是，一些名称和注释的是芬兰:-)）这里是链接http://www.equstom.fi/hanuri.html

$('#valitsija').click(function() { 
$.get('http://www.equstom.fi/kurssit.xml', function(data) { 
    $('#accordion').empty(); 
    $(data).find('Kurssi').each(function() { 
    var $kurssi = $(this); 
    var html = '<div>'; 
    html += '<h3><a href="#">' + $kurssi.find('KurssinNimi').text() + '</a></h3>'; 
    html += '<div>' + $kurssi.find('KurssiKuvaus').text() + '</div>'; 
    html += '</div>'; 
    $('#accordion').append($(html)); 
    }); 
}); 
}); 

/* * ** * ** * ** * haetaankurssit loppu * ** * ** ** * ***/ //手风琴 $（ “＃手风琴”）手风琴（{标题： “H3”}）;

http://www.equstom.fi/hanuri.html 

Answer 1

请注意下面我添加的两行（带注释）。您需要销毁并重新创建手风琴。

$('#valitsija').click(function() { 
    $.get('http://www.equstom.fi/kurssit.xml', function(data) { 

     //you need to destroy the accordion first 
     $('#accordion').accordion("destroy"); 
     $('#accordion').empty(); 

     $(data).find('Kurssi').each(function() { 

      var $kurssi = $(this); 
      var html = '<div>'; 
      html += '<h3><a href="#">' + $kurssi.find('KurssinNimi').text() + '</a></h3>'; 
      html += '<div>' + $kurssi.find('KurssiKuvaus').text() + '</div>'; 
      html += '</div>'; 
      $('#accordion').append($(html)); 

     }); 

     //you need to re-make the accordion 
     $("#accordion").accordion({ header: "h3" }); 
    }); 
}); 

我建议将#accordion存储到一个变量中，因此您不必继续搜索它。这被称为缓存。 （我知道它不是你的问题，但是我认为我会提供这个建议）。事情是这样的：

$('#valitsija').click(function() { 
    $.get('http://www.equstom.fi/kurssit.xml', function(data) { 

     var acc = $('#accordion'); 
     //you need to destroy the accordion first 
     acc.accordion("destroy"); 
     acc.empty(); 

     $(data).find('Kurssi').each(function() { 

      var $kurssi = $(this); 
      var html = '<div>'; 
      html += '<h3><a href="#">' + $kurssi.find('KurssinNimi').text() + '</a></h3>'; 
      html += '<div>' + $kurssi.find('KurssiKuvaus').text() + '</div>'; 
      html += '</div>'; 
      acc.append($(html)); 

     }); 

     //you need to re-make the accordion 
     acc.accordion({ header: "h3" }); 
    }); 
}); 

Proof that it works

Answer 2

我昨晚写了一个XML到jQuery的手风琴实用，我想我会跟大家分享在这里。任何反馈意见。

http://lytsp33d.com/xml-to-jquery-accordion/

最好的问候， 扎克