用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/

最好的問候， 扎克