jquery - 通过ajax加载jquery手风琴

Question

我在容器里有一个手风琴：

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

现在我通过ajax调用填写html （手风琴）。它工作正常，但只能通过第一个ajax调用。通过第二次，第三次等调用，手风琴的动画不起作用。

// 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在填写手风琴之前删除/附加：

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

然后它工作正常。但这可能是正确的方法吗？

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

Answer 1

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

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

解决方案是检查手风琴是否已经存在：

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

整体解决方案：

    (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);

谢谢！

Answer 2

尝试 ：

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