如何在动态添加的内容上使用先前的同级内容？

Question

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

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

添加代码没有问题，但是，手风琴永远不会完成，按钮也没有样式。该错误显示 Uncaught TypeError: Cannot read property 'style' of 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 调用在手风琴中添加新表单之前被调用..（发生这种情况是因为 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]:最后”）；