且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

填充jQuery UI的手风琴与XML,结合问题

更新时间:2023-10-31 20:13:40

请注意下面两行的我增加(带注释)。你需要摧毁,然后重新创建手风琴。

  $('#valitsija')。点击(函数(){
    $获得('http://www.equstom.fi/kurssit.xml'功能(数据){        //你需要先消灭手风琴
        $('#手风琴)手风琴(消灭)。
        $('#手风琴')空();        $(数据).find('Kurssi')。每个(函数(){            变量$ kurssi = $(本);
            VAR HTML ='< D​​IV>';
            HTML + ='&所述; H3>&下; A HREF =#>' + $ kurssi.find('KurssinNimi')文本()+'< / A>< / H3和GT;';
            HTML + ='< D​​IV>' + $ kurssi.find('KurssiKuvaus')文本()+'< / DIV>';
            HTML + ='< / DIV>';
            $('#手风琴')追加($(HTML));        });        //你需要重新进行手风琴
        $(#手风琴),手风琴({​​头:H3});
    });
});

我建议#accordion存储到一个变量,所以你不必继续寻找它。这就是所谓的高速缓存。 (我知道那不是你的问题,但想我会提供反正这个建议)。事情是这样的:

  $('#valitsija')。点击(函数(){
    $获得('http://www.equstom.fi/kurssit.xml'功能(数据){        VAR ACC = $('#手风琴');
        //你需要先消灭手风琴
        acc.accordion(消灭);
        acc.empty();        $(数据).find('Kurssi')。每个(函数(){            变量$ kurssi = $(本);
            VAR HTML ='< D​​IV>';
            HTML + ='&所述; H3>&下; A HREF =#>' + $ kurssi.find('KurssinNimi')文本()+'< / A>< / H3和GT;';
            HTML + ='< D​​IV>' + $ kurssi.find('KurssiKuvaus')文本()+'< / DIV>';
            HTML + ='< / DIV>';
            acc.append($(HTML));        });        //你需要重新进行手风琴
        acc.accordion({头:H3});
    });
});

证明,它的作品

I am populating jQuery accordion from simple xml file, I can get my data and append it as html to simulate accordion markup. Then I call for accordion, it won't work!

I guess the problem is binding newly created data to DOM, I have tried .live() and .delegate with no success.

How should I proceed?

Here is simplified example of my code (sorry that some of the names and comments are in finnish :-)) here is the link 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 ****** ******/ // Accordion $("#accordion").accordion({ header: "h3" });

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

Note the two lines below I added (with comments). You need to destroy and then recreate the accordion.

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

I would suggest storing the #accordion into a variable so you don't have to keep searching for it. This is called caching. (I know its not your question, but figured I'd offer this suggestion anyways). Something like this:

$('#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