Comment utilisez-vous frère précédent sur le contenu ajouté dynamiquement?

Question

J'essaie d'ajouter dynamiquement des éléments à un accordéon. Chaque élément ajouté contient un formulaire avec des boutons radio portant le code Custom Form Elements. Voici le code que j'utilise pour ajouter l'élément à l'accordéon.

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

Le code est ajouté sans problème, cependant, l'accordéon ne se termine jamais et les boutons ne sont pas stylés. L'erreur indique Uncaught TypeError: Impossible de lire la propriété 'style' de null. Lorsque je retire le bouton radio, l'accordéon fonctionne sans problème.

Voici le code pour 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

Mettez le code d'accordéon à l'intérieur de la fonction de rappel ..

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

sinon, il est appelé avant l'appel ajax ajoute la nouvelle forme dans l'accordéon. (il arrive parce que l'appel ajax .get() est asynchrone)

L'erreur spécifique vous évoquez peut être causé par ce qui se passe à l'intérieur de la méthode callAccordion(), que nous ne pouvons pas voir .. si aucune aide là à moins que vous postez le code de cela aussi ..

[Mise à jour]

J'ai créé une petite mise à jour du plug-in (non testé) qui pourraient couvrir vos besoins ..

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"; 
        } 
       } 
      } 
     } 
}, 

Ajouter cette méthode dans le plug-in, et appelez Custom.update() juste après vous insérez le nouveau contenu dans votre page, juste après $(data).insertAfter(".accordion div#[id^=element]:last");