JQuery Accordion 不排序

Question

我有一架带有子手风琴的手风琴。当用户点击“New Topic”按钮时，它将通过克隆列表中的第一个手风琴来创建一个新的手风琴。但是，当这种情况发生时，对于添加的其他手风琴，子手风琴是不可排序的，但前两个初始手风琴的子手风琴是可排序的。

当您尝试对它们进行排序时，您可以看到手风琴拖动但位置没有更新，它只是回到原始位置。

关于为什么会发生这种情况的任何想法？下面是我目前编写的 JQuery 代码以及演示链接。

谢谢

var counter = 1;
var subCounter = 1;
var deleteSubcounter = 1;
var deleteCounter = 1;
var subFormCounter = 1;

$(function() {
    indexFunction();
    $('.accordion h3').click(function() {
        if ($(this).next().is(':hidden')) {
            var buttons = $(".remove")
            $(this).find(buttons).hide();
        } else {
            $(".remove").show();
        }
    });
    $('.Subgroup h3').click(function() {
        if ($(this).next().is(':hidden')) {
            var buttons1 = $(".removeSub")
            $(this).find(buttons1).hide();
        } else {
            $(".removeSub").show();
        }
    });
    $("#num").click(function() {

        var aName = "accordion" + (counter + 1);
        var tName = "subtopic" + (counter + 1);
        var tInfo = "subtopicText" + (counter + 1);
        var headerText = "Topic " + (counter + 1);
        var buttonName = "submitInfo" + (counter + 1);
        var divID = "abc" + (counter + 1);
        var formID = "form" + (counter + 1);
        var formTextName = subFormCounter + "subtopicText" + subCounter;
        var subtopicName = subFormCounter + "subtopic" + subCounter;
        var subPosition = subFormCounter + "position" + subCounter;
        var subButtonName = subFormCounter + "submitButton" + subCounter;
        var divSubName = (subFormCounter + 1) + "subAccordion" + subCounter;
        counter++;
        subFormCounter++;
        indexFunction();
        $(".group1:first").clone(true).appendTo("#main");
        $(".group1:last").attr("name", aName);
        $(".remove:last").css("visibility", "visible");
        //$(".group1:last").attr("id", divID);



        if (counter == 10) {
            $("#num").attr("disabled", "disabled");
        } else if (counter < 10) {
            $("#num").removeAttr("disabled");
        }
        indexFunction();


    });
    $(".remove").click(function() {

        $(this).parent().parent().remove();
        counter--;
        if (counter < 10) {
            $("#num").removeAttr("disabled");
        }
        indexFunction();

    });
    $(".removeSub").click(function() {

        $(this).parent().parent().remove();
        subCounter--;

    });
    $("div.accordion")
        .accordion({
            header: "> div > h3",
            collapsible: true,
            heightStyle: "content",
            active: false
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function(event, ui) {
                // IE doesn't register the blur when sorting
                // so trigger focusout handlers to remove .ui-state-focus
                ui.item.children("h3").triggerHandler("focusout");
                indexFunction();
                // Refresh accordion to handle new order
                $("this").accordion("refresh");
            }
        });
     $(".newSub1").click(function() {

        if($('.accordion').hasClass('ui-accordion-content-active')) 
        {

        var test = $( ".accordion" ).accordion( "option", "active" );
        var active = $(".accordion #sub").eq(test)
        var subName = "subAccordion" + (subCounter + 1);
        var formName = "form" + (subCounter + 1);
        var formTextName = subFormCounter + "subtopicText" + (subCounter + 1);
        var subtopicName = subFormCounter + "subtopic" + (subCounter + 1);
        var subPosition = subFormCounter + "position" + (subCounter + 1);
        var subButtonName = subFormCounter + "submitButton" + (subCounter + 1);
        var divSubName = subFormCounter + "subAccordion" + (subCounter + 1);
        var divID = "abc" + (counter + 1);
        subCounter++;
        $(".Subgroup:first").clone(true).appendTo(active);
        $(".info1:last").children(".formText1").val("");
        $(".info1:last").children(".formText2").val("");
        $(".info1:last").children(".formText3").val("");
        $(".removeSub:last").css("visibility", "visible");
        //var testIndex = $( ".Subgroup" ).index();
        //$(".formText3").val(testIndex);            
        //$(".group1:last").attr("id", divID);

        }
        /*if (subCounter == 10) {
            $(".newSub1").attr("disabled", "disabled");
        } else if (counter < 10) {
            $(".newSub1").removeAttr("disabled");
        }*/




     });

});

var indexFunction = function() {

    var test1 = ($('div#abc1').index() + 1);
    var test2 = ($('div#abc2').index() + deleteCounter);
    var test3 = ($('div#abc3').index() + deleteCounter);
    var test4 = ($('div#abc4').index() + deleteCounter);
    var test5 = ($('div#abc5').index() + deleteCounter);
    var test6 = ($('div#abc6').index() + deleteCounter);
    var test7 = ($('div#abc7').index() + deleteCounter);
    var test8 = ($('div#abc8').index() + deleteCounter);
    var test9 = ($('div#abc9').index() + deleteCounter);
    var test10 = ($('div#abc10').index() + deleteCounter);

    $("#form1").children(".formText3").val(test1);
    $("#form2").children(".formText3").val(test2);
    $("#form3").children(".formText3").val(test3);
    $("#form4").children(".formText3").val(test4);
    $("#form5").children(".formText3").val(test5);
    $("#form6").children(".formText3").val(test6);
    $("#form7").children(".formText3").val(test7);
    $("#form8").children(".formText3").val(test8);
    $("#form9").children(".formText3").val(test9);
    $("#form10").children(".formText3").val(test10);
};

http://jsfiddle.net/d3L7y5jj/4/

Answer 1

看起来你在创建新手风琴时没有调用.sortable。