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

本文介绍了填充jQuery UI的手风琴与XML，结合问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我从简单的XML文件填充jQuery的手风琴，我可以得到我的数据，并追加其为html模拟手风琴标记。然后，我呼吁手风琴，它将无法工作！

我想这个问题是新创建的数据绑定到DOM，我都试过.live（），并没有成功.delegate。

我该如何操作？

下面是简单的例子我的code的（对不起，一些名称和注释的是芬兰:-)）这里是链接的

  $（'＃valitsija'）。点击（函数（）{
 $获得（'http://www.equstom.fi/kurssit.xml'功能（数据）{
    $（'＃手风琴'）空（）;
  $（数据）.find（'Kurssi'）。每个（函数（）{
  变量$ kurssi = $（本）;
  VAR HTML ='＆LT; DIV＆GT;';
  HTML + ='＆所述; H3＆GT;＆下; A HREF =＃＆GT;' + $ kurssi.find（'KurssinNimi'）文本（）+'＆LT; / A＆GT;＆LT; / H3和GT;';
  HTML + ='＆LT; DIV＆GT;' + $ kurssi.find（'KurssiKuvaus'）文本（）+'＆LT; / DIV＆GT;';
  HTML + ='＆LT; / DIV＆GT;';
  $（'＃手风琴'）追加（$（HTML））;
  }）;
 }）;
}）;

/ * * 的**的 * 的**的 * 的**的 * 的 haetaankurssit loppu * 的**的 * 的** 的**的 * 的* ** /
//手风琴
$（＃手风琴），手风琴（{头：H3}）;

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

解决方案

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

  $（'＃valitsija'）。点击（函数（）{
    $获得（'http://www.equstom.fi/kurssit.xml'功能（数据）{        //你需要先消灭手风琴
        $（'＃手风琴）手风琴（消灭）。
        $（'＃手风琴'）空（）;        $（数据）.find（'Kurssi'）。每个（函数（）{            变量$ kurssi = $（本）;
            VAR HTML ='＆LT; DIV＆GT;';
            HTML + ='＆所述; H3＆GT;＆下; A HREF =＃＆GT;' + $ kurssi.find（'KurssinNimi'）文本（）+'＆LT; / A＆GT;＆LT; / H3和GT;';
            HTML + ='＆LT; DIV＆GT;' + $ kurssi.find（'KurssiKuvaus'）文本（）+'＆LT; / DIV＆GT;';
            HTML + ='＆LT; / DIV＆GT;';
            $（'＃手风琴'）追加（$（HTML））;        }）;        //你需要重新进行手风琴
        $（＃手风琴），手风琴（{头：H3}）;
    }）;
}）;

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

  $（'＃valitsija'）。点击（函数（）{
    $获得（'http://www.equstom.fi/kurssit.xml'功能（数据）{        VAR ACC = $（'＃手风琴'）;
        //你需要先消灭手风琴
        acc.accordion（消灭）;
        acc.empty（）;        $（数据）.find（'Kurssi'）。每个（函数（）{            变量$ kurssi = $（本）;
            VAR HTML ='＆LT; DIV＆GT;';
            HTML + ='＆所述; H3＆GT;＆下; A HREF =＃＆GT;' + $ kurssi.find（'KurssinNimi'）文本（）+'＆LT; / A＆GT;＆LT; / H3和GT;';
            HTML + ='＆LT; DIV＆GT;' + $ kurssi.find（'KurssiKuvaus'）文本（）+'＆LT; / DIV＆GT;';
            HTML + ='＆LT; / DIV＆GT;';
            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

这篇关于填充jQuery UI的手风琴与XML，结合问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！