заполнить JQuery UI аккордеон с XML, проблема с привязкой - PullRequest
Новая
       8

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

1 голос
/ 30 октября 2010

Я заполняю аккордеон 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 ****** ****** / // Аккордеон $ ("#аккордеон "). аккордеон ({header:" h3 "}); 

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

Ответы [ 2 ]

1 голос
/ 30 октября 2010

Обратите внимание на две строки ниже, которые я добавил (с комментариями). Вам нужно уничтожить, а затем воссоздать аккордеон. 

    $('#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" });
    });
});

Доказательство того, что это работает

0 голосов
/ 13 августа 2013

Вчера вечером я написал утилиту XML для jQuery Accordion и решил поделиться ею со всеми вами здесь.Любые отзывы приветствуются.

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

С уважением, Зак

...