jquery手风琴不起作用

Question

I use accordion box comes from Jquery UI. It doesnt work.

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Here is the event handler I use accodion box

$("#skillcat").click(function(e) {
                //var submit_val = new Array();
                //$('#accordion1').accordion('destroy');
                e.preventDefault();
                var ids = [];
                var el = $('[name*=check_subjects]:checked'); //Get all checked Checkboxes
                el.each(function () {
                    ids.push($(this).attr('id')); //get the Id from each checkbox
                });

                $.ajax( {
                type : "POST",

                dataType : "json",
                //
                url : "./wp-admin/admin-ajax.php",
                data : {
                    action : 'each_category',
                    check_subjects : ids
                },
                success : function(data) {
                            alert(data);

                    $('#accordion1').html(data);
                    $("#accordion1").accordion({ active: 0 });
                    $("#accordion1").css("font-family", "'Trebuchet MS', Arial, Helvetica, sans-serif");
                    $("#accordion1").css("font-size", "0.9em");



                    }
            });
        });

place that I suppose to render accodion

   <div id="accordion1" >


    </div>

However, when I click the button first time I get the data to alert box. It render conent but it doesn't apply accodion box. I have another accordion on same page but it works.

If I click another button on same page and try submitting above button, I get data to alert but it won't render the html to browser.

where I have done the mistake?

Ajax is working.

Update

when I add this code

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

before

$('#accordion1').html(data);

Accodion starts to work. But as usual it isnot working second time.

Answer 1

All jQuery UI plugins maintain state, such as the current option values, whether the plugin is enabled or disabled, which plugins have been initialized on the element, etc. This state persists from the time the plugin is instantiated on the element until it is destroyed, either explicitly by the user calling .pluginName('destroy') or by removing the element (or one of its ancestors) via .remove(). Because of this state management, you cannot instantiate the same plugin on an element multiple times, unless you destroy the plugin instance first.

Please check following link for more inormation help link