jquery événement accordéon changement manquant newContent

Question

J'utilise l'accordéon jQuery UI pour la première fois et je pense que je manque quelque chose ici. J'ai écrit le code suivant:

    <div id="theAccordion">
        <h2><a href="#">Header1</a></h2>
        <div>old content 1</div>
        <h2><a href="#">Header2</a></h2>
        <div>old content 2</div>
        <h2><a href="#">Header3</a></h2>
        <div>old content 3</div>
        <h2><a href="#">Header4</a></h2>
        <div>old content 4</div>
        <h2><a href="#">Header5</a></h2>
        <div>old content 5</div>
    </div>
<script type="text/javascript">
    var map = {
        Header1: function(jqObj) { jqObj.append("<p>new content 1</p>"); },
        Header2: function(jqObj) { jqObj.append("<p>new content 2</p>"); },
        Header3: function(jqObj) { jqObj.append("<p>new content 3</p>"); },
        Header4: function(jqObj) { jqObj.append("<p>new content 4</p>"); },
        Header5: function(jqObj) { jqObj.append("<p>new content 5</p>"); }
    };
    function accordionChange(event, ui) {
        ui.newContent.empty();
        eval("map." + ui.newHeader.text() + "(ui.newContent)");
    }
    $(function() {
        $("#theAccordion").accordion({
            change: function(event, ui) { accordionChange(event, ui); }
        });
    });
</script>

Le code fonctionne comme prévu, il déclenche les fonctions de carte, mais pas de code est ajouté au contenu de l'accordéon parce que l'objet newContent semble être tout le temps vide. Je le débogage avec des outils de débogage IE8 et jqObj.length est zéro si aucune modification est apportée dans le newContent. avez-vous une idée de ce qui se passe ici?

Merci d'avance

Answer 1

En fait - vous avez eu du mal parce qu'il ya un bug dans le widget accordéon. J'ai fait un patch tout à l'heure: http://dev.jqueryui.com/ticket/4469 #comment: 4

Answer 2

trouvé la solution!

Ajout d'un paragraphe dans le contenu résolu le problème, de sorte que le code modifié était cette

<div id="theAccordion">
    <h2><a href="#">Header1</a></h2>
    <div><p>old content 1</p></div>
    <h2><a href="#">Header2</a></h2>
    <div><p>old content 2</p></div>
    <h2><a href="#">Header3</a></h2>
    <div><p>old content 3</p></div>
    <h2><a href="#">Header4</a></h2> 
    <div><p>old content 4</p></div>
    <h2><a href="#">Header5</a></h2>
    <div><p>old content 5</p></div>
</div>

Merci à tous pour votre aide

Answer 3

Il pourrait avoir quelque chose à voir avec la liaison, mais je ne suis pas sûr. Avez-vous essayé de mettre le code de fonction réelle dans l'initialisation de l'accordéon. Notez que je aussi changé append () au format html () puisque votre contenu original n'a pas été enveloppé dans un p.

var map = {
    Header1: function(jqObj) { jqObj.html("new content 1"); },
    Header2: function(jqObj) { jqObj.html("new content 2"); },
    Header3: function(jqObj) { jqObj.html("new content 3"); },
    Header4: function(jqObj) { jqObj.html("new content 4"); },
    Header5: function(jqObj) { jqObj.html("new content 5"); }
};

$(function() {
    $("#theAccordion").accordion({
        change: function(event, ui) {
            ui.newContent.empty();
            eval( "map." + ui.newHeader.text() + "(ui.newContent)");
        }
    });
})

Answer 4

Serait-ce parce que vous le vider avant de l'utiliser? i.e.:

ui.newContent.empty();
eval( "map." + ui.newHeader.text() + "(ui.newContent)");

Essayez de remplacer le rappel accordionChange à ceci:

function accordionChange(event, ui) {
    var text = ui.newContent.text();
    ui.newContent.empty();
    eval("map." + ui.newHeader.text() + "(text)");
}