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

发布于 2024-09-30 01:27:28 字数 1143 浏览 6 评论 0原文

我从简单的 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 ****** ******/ // 手风琴 $("#accordion").accordion({ header: "h3" });

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我是男神闪亮亮 2024-10-07 01:27:28

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

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

证明它有效

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

回复收藏 0 原文