附加元素不會保留在父元素中

在following code中，如果一個輸入具有錯誤圖標，則先前在其他輸入中附加的錯誤圖標將被刪除。這是爲什麼，我該如何解決這個問題？附加元素不會保留在父元素中

<div class="reg-input"> 
    <input type="text" name="first-name" placeholder="First name"> 
</div> 
<div class="reg-input"> 
    <input type="text" name="last-name" placeholder="Last name"> 
</div>

var $errorIcon = $('<i class="error">!</i>'); 
var $regInput = $('.reg-input input'); 
$regInput.on('focus', function() { 
    var $inputWrapper = $(this).parent(); 
    if ($inputWrapper.has('i').length === 0) { 
     $inputWrapper.append($errorIcon); 
    } 
});

.error { 
    color: #fff; 
    border: 1px solid brown; 
    background: brown; 
    border-radius: 100%; 
    position: absolute; 
    right: 5px; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.reg-input { 
    position: relative; 
} 

.reg-input input{ 
    width: 100%; 
} 
    }

來源

2016-09-28 ipkiss

，因爲相同的元素被移動到其他位置，則需要追加之前克隆：

$inputWrapper.append($errorIcon.clone());

Update Fiddle

來源

2016-09-28 13:43:58

是絕對多數民衆贊成正確的。我犯了這個錯誤 – mtizziani

由於要附加相同的元素，它移至新位置，將元素聲明移至if區塊k創建一個新元素並追加。

$inputWrapper.append('<i class="error">!</i>');

DEMO

來源

2016-09-28 13:44:19 Satpal

是的，這也將工作，因爲關閉不會發生 –

附加元素不會保留在父元素中

回答

相關問題