基金会手风琴没有处理AJAX加载的数据

时间:2014-12-18 06:42:08

标签: jquery ajax zurb-foundation

我正在编写一个简单的待办事项API。我目前正在开发Web浏览器客户端应用程序。用户登录后,会将其转到显示所有待办事项以及“添加新”按钮的页面。我使用AJAX进行初始数据加载,并将结果放在<ul class="accordion" id="results" data-accordion></ul>

然而,在加载数据后,手风琴似乎无法正常工作。我可以成功折叠第一个项目,但无法重新打开它。这是我的相关jQuery代码:

var ajaxurl = 'todo-tasks.php';
var results = $('#results');
$(function() {
    $(".datepicker").datepicker();
    $(document).foundation();
    load();

    $('#add-form').submit(function() {
        create();
    });

    function load() {
        var params = { action : 'readall'};
        $.post(ajaxurl, params, function(data) {
            var json = JSON.parse(data);
            //console.log(json);

            $.each(json, function(i, item) {
                var id = item.todo_id;
                var title = item.title;
                var status = item.is_done;
                var user_id = item.user_id;
                var due_date = item.due_date;
                var description = item.description;
                var lblclass, text, active;

                if ( status ) {
                    lblclass = ' success';
                    text = 'Completed';
                }

                else {
                    lblclass = ' alert';
                    text = 'Not Finished';
                }

                if ( i == 0 ) {
                    active = ' active';
                }

                else {
                    active = '';
                }

                var html = '<li class="accordion-navigation">';
                html += '<a href="#panel' + i + 'b">' + title + '<span class="label right' + lblclass + '">' + text + '</span></a>'
                html += '<div id="#panel' + i + 'b" class="content' + active + '">';
                html += '<p><strong>Due Date: </strong><br />' + due_date + '</p>';
                html += '<p><strong>Description: </strong><br />' + description + '</p>';
                html += '<div class="right">';
                html += '<a href="#" class="delete button small alert">Delete</a> ';
                html += '<a href="#" class="edit button small secondary">Edit</a>';
                html += '</div>';
                html += '</div>';
                html += '</li>';

                results.append(html);
                $(document).foundation('accordion', 'reflow');
            });



        }); 
    }

你认为这会阻止手风琴正常运作吗?

由于

1 个答案:

答案 0 :(得分:0)

嗯,我感到愚蠢。

<div id="#panel...并不需要#那里......