用xml填充jQuery UI手风琴,绑定问题 [英] populate jQuery UI accordion with xml, binding problem
问题描述
我正在从简单的 xml 文件填充 jQuery 手风琴,我可以获取我的数据并将其附加为 html 以模拟手风琴标记.那我叫手风琴,不行!
我猜问题是将新创建的数据绑定到 DOM,我尝试过 .live() 和 .delegate 没有成功.
我应该如何进行?
这是我的代码的简化示例(抱歉,有些名称和注释是芬兰语:-))这里是链接 http://www.eqstom.fi/hanuri.html
$('#valitsija').click(function() {$.get('http://www.eqstom.fi/kurssit.xml', 函数(数据){$('#accordion').empty();$(data).find('Kurssi').each(function() {var $kurssi = $(this);var html = '';html += '<h3><a href="#">'+ $kurssi.find('KurssinNimi').text() + '</a></h3>';html += ''+ $kurssi.find('KurssiKuvaus').text() + '</div>';html += '</div>';$('#accordion').append($(html));});});});/* **********haetaankurssit loppu ****** ******///手风琴$("#accordion").accordion({ header: "h3" });
http://www.eqstom.fi/hanuri.html
解决方案 注意我添加的下面两行(带注释).您需要销毁并重新创建手风琴.
$('#valitsija').click(function() {$.get('http://www.eqstom.fi/kurssit.xml', 函数(数据){//你需要先销毁手风琴$('#accordion').accordion("destroy");$('#accordion').empty();$(data).find('Kurssi').each(function() {var $kurssi = $(this);var html = '';html += '<h3><a href="#">'+ $kurssi.find('KurssinNimi').text() + '</a></h3>';html += ''+ $kurssi.find('KurssiKuvaus').text() + '</div>';html += '</div>';$('#accordion').append($(html));});//你需要重新制作手风琴$("#accordion").accordion({ header: "h3" });});});我建议将#accordion 存储到一个变量中,这样您就不必继续搜索它.这称为缓存.(我知道这不是你的问题,但我想我还是会提供这个建议).像这样:
$('#valitsija').click(function() {$.get('http://www.eqstom.fi/kurssit.xml', 函数(数据){var acc = $('#accordion');//你需要先销毁手风琴acc.accordion("销毁");acc.empty();$(data).find('Kurssi').each(function() {var $kurssi = $(this);var html = '';html += '<h3><a href="#">'+ $kurssi.find('KurssinNimi').text() + '</a></h3>';html += ''+ $kurssi.find('KurssiKuvaus').text() + '</div>';html += '</div>';acc.append($(html));});//你需要重新制作手风琴acc.accordion({ header: "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" });
});
});
这篇关于用xml填充jQuery UI手风琴,绑定问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆