通过AJAX jQuery的手风琴装 [英] jquery accordion loading via ajax

问题描述

我有在容器中的手风琴：

I've got an accordion in the container:

<div id="address_results"></div>

现在我通过的 AJAX 拨打填写在 HTML （手风琴）。它工作正常，但只有第一个 AJAX 通话。到了第二个，第三个，等电话，手风琴的动画不能正常工作。

Now I fill in the html (an accordion) via an ajax call. It works fine but only by the first ajax call. By the second, third, etc. call, the animation of the accordion doesn't work.

// Ajax request
        $(this).submit(function() {
            var postal = $(o.postalDiv).val();

            $.getJSON(o.url,{ action: o.action, id: o.id, postal: postal } , function(json) {
                var result = json.content;
                var addresses = result['addresses'];
                var strXML = result['xml'];

                outputHtml(addresses);

            });
            return false;
        });

        // Ajax request success
        function outputHtml(addresses) {

            $(o.resultsDiv).html(addresses);

            // Generate the accordion
            $(o.resultsDiv).accordion({

                autoHeight: false,
                header:'div.toggler',
                active: false,
                collapsible: true
            });

当我删除/追加 DIV 之前，我填的是手风琴：

When I remove/append the div before I fill in the accordion:

$('#addresses_results').remove();
$('#reswrapper').append('<div id="address_results"></div>');

然后正常工作。但是，这可能是正确的方式？

then it works fine. But this can be the right way?

（对不起我的英语水平，是不是我的母语） 谢谢！

(sorry my English, is not my native language) thanks!

推荐答案

以下行不起作用，因为第一个Ajax调用手风琴不存在。

The following line doesn't work, because by the first ajax call the accordion isn't exists.

$('#addresses_results').accordion('destroy').accordion();

解决的办法是检查是否手风琴已经存在：

The solution is to check if the accordion already exists:

 if ($(o.resultsDiv).hasClass('ui-accordion')) {
     $(o.resultsDiv).accordion('destroy');
  }

整体解决方案：

The whole Solution:

    (function ($) {

    $.fn.address = function (options) {
        var defaults = {
            url:           '/ajax.php',
            action:        'fmd',
            id:             0,
            resultsDiv:    '#address_results',
            postalDiv:     '#address_postal'
        };
        var o = $.extend(defaults,options);

        // Ajax request
        $(this).submit(function() {
            var postal = $(o.postalDiv).val();

            $.getJSON(o.url,{ action: o.action, id: o.id, postal: postal } , function(json) {
                var result = json.content;
                var addresses = result['addresses'];
                var strXML = result['xml'];

                outputHtml(addresses);

            });
            return false;
        });

        // Ajax request success
        function outputHtml(addresses) {

            $(o.resultsDiv).html(addresses);

            // Check if the accordion already exist. if so destroy it
            if ($(o.resultsDiv).hasClass('ui-accordion')) {
                $(o.resultsDiv).accordion('destroy');
            }

            // Generate the accordion
            $(o.resultsDiv).accordion({
                autoHeight: false,
                header:'div.toggler',
                active: false,
                collapsible: true
            });
        }

    };
})(jQuery);

谢谢！

这篇关于通过AJAX jQuery的手风琴装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！