append() 做了两次！在脚本的一部分 jQuery + UI

Question

我不明白为什么这个append() 会重复两次。

这是一个回调函数，对应于拖动发生后必须执行的操作。 （用户界面）

做了一堆处理来识别被拖拽的div和一些我们想要显示的对应文本（这是一种“选择一个答案然后拖放到正确的case上）。 在下降序列中：

.droppable({
    drop: function(event, ui){ //this full code below..

我得到了一个已经存在的 div (display:none) 的 html，并想将它添加到我们刚刚显示的 div 中。这样我们就可以将好的内容注入到答案 div 中。 但是这个 append() 完成了两次工作（？），我得到了两次文本。

set_drag = function(){
    //on retire les clones inutiles
    jQuery('.cible').not('#cas1bcible, #cas2bcible, #cas3bcible, #cas4bcible').remove();

    // on garde l'img pour garder les dim du div
    jQuery('.cible > img').fadeTo(0, 0);
    jQuery('.cible').droppable({
// tout ce qui se passe si on drop
    drop: function(event, ui){
            //on récupère l'id de la forme droppée
            var forme_drag = jQuery(ui.draggable);
            var drag_id = jQuery(forme_drag).attr('id');

            //extraction du code réponse - 2 dernier caract de l'id
            var rep_num = '#rep' + drag_id.slice(-2);
            var forme_ok = jQuery(ui.draggable).attr('class');

            //Il faut afficher le texte d'accompagnement qqsoit la réponse
            //Logo et titre
            var n_texte = (drag_id).slice(-2).slice(0, -1);
            var titre_rep = '<div id="titre-rep">&nbsp;&nbsp;<img src="images/pt-logo-pnr.gif" alt="logo pnr" /><h3>Le PNR vous conseille</h3><h4>Cas ' + n_texte + '</h4></div>'
            var textID = '#txt' + n_texte;
            var le_texte = jQuery(textID).html();

            jQuery('.continuer').show();
            //on gère si ok ou pas
            if (jQuery(forme_drag).hasClass('ok')) {
                //Gestion du BON
                //affiche le coucou un peu + heut que la zone de drop
                //jQuery('#bravo').css('top', '10px').show(300);
                // affiche la réponse prévue
                jQuery('#reponses, #back-reponses').slideDown(300, function(){
                    //jQuery(rep_num).show().fadeTo('slow', 1, 'linear');
                    jQuery(rep_num).append(le_texte);
                    jQuery(rep_num).addClass('rep_ok').show().css('opacity', 1);

                });
                // insertion de la titraille
                jQuery('#reponses').append(titre_rep);

                // on rend draggable la réponse ...si on veut la bouger
                jQuery('.reponse').draggable({
                    refreshPositions: true,
                    containment: 'parent',
                    opacity: 0.65,
                    snap: false,
                    cursor: 'move',
                });

            }
            else {
                //gestion du FAUX
                // on identifie chaque réponses fausse pour faire disparaitre la forme ensuite
                jQuery(forme_drag).addClass('faux'); 

               // jQuery('#faux').css('top', '10px').show(300);
               // affiche la réponse prévue
                jQuery('#reponses, #back-reponses').slideDown(300, function(){
                    //jQuery(rep_num).show().fadeTo('slow', 1, 'linear');
                    jQuery(rep_num).append(le_texte);
                    jQuery(rep_num).addClass('rep_faux').show().css('opacity', 1);

                });

                jQuery('#reponses').append(titre_rep);
                jQuery('.reponse').draggable({
                    refreshPositions: true,
                    containment: 'parent',
                    opacity: 0.65,
                    snap: false,
                    cursor: 'move',

                });

            }

        }
    });

Answer 1

我让它按预期工作，将 append() 指令移到 if/else 语句之外。

(???)

在我的情况下没关系，因为要附加的 txt 最终不依赖于这个测试，并且也可以在它之后立即完成，但它仍然很奇怪。