Question

我正在尝试动态地向手风琴添加元素。每个添加的元素都包含一个带有Custom Form Elements样式的单选按钮的表单。这是我用来将元素添加到手风琴的代码。

$("#addpage").click(function(){
  $.get("addpage.php", function(data){
    $(data).insertAfter(".accordion div#[id^=element]:last");
  });
  $(".accordion").accordion('destroy');
  callAccordion();
});

添加代码没有问题，但手风琴永远不会完成，按钮也没有样式。错误显示Uncaught TypeError：无法读取属性'style'的null。当我取下单选按钮时，手风琴可以正常工作。

以下是callAccordion

的代码

function callAccordion(){
$(".accordion").accordion({
   active: false,
   autoheight: false,
   collapsible: true,
   alwaysOpen: false,
   header: '> div >h3'
   }).sortable({
    axis: "y",
    handle: "h3",
    stop: function(event, ui){
    stop = true;
    },
        update: function(event, ui){
    var result = $(".accordion").sortable('toArray');
    stop = true;
    $.ajax({
    type: 'post',
    data: "element=" + result,
    url: 'modules/updatepageorder.php',
    success: function(data){
       if(data != "true"){
         alert("Unable to update page order!");
            }
    }
     });
   }
 });
 }

Answer 1

将手风琴代码放在回调中..

$("#addpage").click(function(){
  $.get("addpage.php", function(data){
  $(data).insertAfter(".accordion div#[id^=element]:last");
  $(".accordion").accordion('destroy');
  callAccordion();
    });
});

否则，在ajax调用在accordion中添加新表单之前调用它。（它发生是因为ajax .get()调用是异步的）

你提到的具体错误可能是callAccordion()方法中发生的任何事情造成的，我们看不到..所以除非你发布那个代码，否则没有帮助..

<强> [更新]

我为插件创建了一个小更新（ 未经测试 ），可能会满足您的需求。

update: function() {

        var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
        for(a = 0; a < inputs.length; a++) {
            if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
                if((!inputs[a].previousSibling) || (inputs[a].previousSibling && inputs[a].previousSibling.className != inputs[a].type)){
                    span[a] = document.createElement("span");
                    span[a].className = inputs[a].type;

                    if(inputs[a].checked == true) {
                        if(inputs[a].type == "checkbox") {
                            position = "0 -" + (checkboxHeight*2) + "px";
                            span[a].style.backgroundPosition = position;
                        } else {
                            position = "0 -" + (radioHeight*2) + "px";
                            span[a].style.backgroundPosition = position;
                        }
                    }
                    inputs[a].parentNode.insertBefore(span[a], inputs[a]);
                    inputs[a].onchange = Custom.clear;
                    if(!inputs[a].getAttribute("disabled")) {
                        span[a].onmousedown = Custom.pushed;
                        span[a].onmouseup = Custom.check;
                    } else {
                        span[a].className = span[a].className += " disabled";
                    }
                }
            }
        }
},

在插件中添加此方法，并在Custom.update()

之后立即在页面中插入新内容后立即致电$(data).insertAfter(".accordion div#[id^=element]:last");

你如何使用以前的兄弟动态添加内容？

1 个答案: