单击选择输入时DOM元素移动

Question

当我点击我的选择#ajouterEmplacement时，它会导致奇怪的行为，他向左移动或者刚刚向上移动的元素向左移动。

以下是我的函数中的代码，它显示了添加按钮中的选择。

function displayGestionEmplacement(){
$("#deletePicture").css('visibility','hidden');
$("#popupDetailMoteur").attr('currentElementDisplayedType','gestionEmplacements');

// si on est en mode edition on rajoute l'option d'ajout d'un stock
if(modeEdition == true){
    var spanAddEmplacment='<span style="display:inline-block;border:1px solid white;margin:15px;padding:10px;">Nouvel emplacement <img id="imgAddEmplacement" style="cursor:pointer;vertical-align:middle;width:25px;width:25px;"src="images/ajouter.png"></span>';
}
else{
    var spanAddEmplacment = '';
}

$("#popupDetailMoteur").html('<img id="fermerPopupGestionMoteurs" src="./images/fermer.png" style="cursor:pointer;position:absolute;top:-12px;right:-12px;">'
    +'<div id="bodyPopup" style="text-align:center;padding:15px;border:1px solid white;background-color:#B9B0A1;">'
        +'<div><p><big><b>Emplacements moteurs</b></big></p></div>'
        +'<div id="mainStock"><span style="display:inline-block;background-color:rgb(180,175,145);cursor:pointer;border:1px solid white;margin:10px;padding:10px;">Usine de Sierre ASI</span></div>'
        +'<div niveau="0"> </div>'
        +'<div niveau="1"> </div>'
        +'<div niveau="2"> </div>'
        +'<div niveau="3"> </div>'
        +'<div niveau="4"> </div>'
        +'<div niveau="5"> </div>'
        +'<div id="ajouterEmplacement">'+spanAddEmplacment+'</div>'
    +'</div>');

//on affiche la gestion les emplacements de base
$("#mainStock").click(function(){
    displayEmplacement(0,0);
});

$("#popupDetailMoteur").css('visibility','visible');
$("#fondPopup").css('background-color','black');
centerElement($("#popupDetailMoteur"));

//demande de fermeture de la gestion des emplacements
$("#fermerPopupGestionMoteurs").click(function(){
    $("#popupDetailMoteur").css('visibility','hidden');
    $("#fondPopup").css('background-color','');
});


//gestion demande d'ajout d'un emplacement
$("#imgAddEmplacement").click(function(){

    //on récupère la liste de tous les stocks de niveau 4 maximum
    var selectOptions ='<option value="x" disabled selected>Emplacement supérieur</option><option value="0">Usine Sierre ASI</option>';

    function createSelectAddStock(stockMaster,stockLevel){
        var spaces = '';
        for (var x=0; x<stockLevel*5;x++){
            spaces+='&nbsp;';
        }
        for(var y in emplacementsFull){
            if(emplacementsFull[y]['e_nom'] != ''){
                if(emplacementsFull[y]['e_master'] == stockMaster && stockLevel<5){
                    //on l'affiche
                    selectOptions +='<option value="'+emplacementsFull[y]['e_id']+'">'+spaces+emplacementsFull[y]['e_nom']+'</option>';

                    //et on affiche ses enfants
                    createSelectAddStock(emplacementsFull[y]['e_id'],stockLevel+1);
                }
            }
        }
    }
    createSelectAddStock(0,0);


    $('#ajouterEmplacement').html('<span style="display:inline-block;border:1px solid white;margin:15px;padding:10px;">'
    +'<span style="display:inline-block;"><select id="newEmplacementMaster">'+selectOptions+'</select></span><br/>'
    +'<span style="display:inline-block;"><input type="text" id="newEmplacementName"></span>'
    +'</span>');    
});

第一个视图

在打开选择之前

打开选择

后

Answer 1

在另一个案例中由我自己解决。 只需要设置一个样式=＆＃34;宽度：XXXpx;＆＃34;