заполнить jQuery UI аккордеон с xml, проблема привязки

Question

Я заполняю jQuery аккордеон из простого XML-файла, я могу получить свои данные и добавить его в качестве 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/

С наилучшими пожеланиями, Zach