JQuery nicht null mit CSS nicht woking

Question

ich diese css in jquery anzuwenden versuchen, wenn das Eingabefeld einen Wert hat, ich versuchte, diese jquery Codes, aber es funktioniert nicht.

Bitte schlagen Sie mir vor!

if ($('#user-email').val() != ''){ 
    $(".email-capt").css({"position":"absolute","margin-top":"0px"}); 
} 

<div class="input-container input-email"> 
    <button class="btn btn-default email-btn"><span class="glyphicon glyphicon-chevron-right"></span></button> 
    <input type="email" required="" value="" tabindex="1" name="name" class="" id="user-email"> 
    <label for="arrival" class="email-capt">Enter your email to be in the know</label> 
</div> 

Answer 1

Sie müssen prüfen, wenn Ihr input Wert ändert Feld. Im Moment prüfen Sie, wann die DOM lädt.

Probieren Sie dies aus, statt:

$("#user-email").change(function(){ // on input value change 
    if($.trim($(this).val()) != ''){ 
     $(".email-capt").css({"position":"absolute", "margin-top":"0px"}); 
    } 
}); 

Wenn Sie überprüfen wollen, wenn die button geklickt wird, können Sie etwas tun können:

$(".email-btn").click(function(){ // if button is clicked 
    if($.trim($(this).val()) != ''){ 
     $(".email-capt").css({"position":"absolute", "margin-top":"0px"}); 
    } 
}); 

Answer 2

function checkFilled() { 
 
    var inputVal = document.getElementById("subEmail"); 
 
    if (inputVal.value == "") { 
 
     inputVal.style.backgroundColor = "yellow"; 
 
    } 
 
    else{ 
 
     inputVal.style.backgroundColor = "green"; 
 
    } 
 
} 
 

 
checkFilled();

<input type="text" id="subEmail" onchange="checkFilled();">

Answer 3

$('button').click(function() { 
 
    if ($('#user-email').val() != ''){ 
 
    $(".email-capt").css({"display":"block","color":"red"}); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="input-container input-email"> 
 
    <button class="btn btn-default email-btn">Click</button> 
 
    <input type="email" required tabindex="1" name="name" id="user-email"> 
 
    <label for="arrival" class="email-capt" style="display:none;">Enter your email to be in the know</label> 
 
</div>

Das Problem war, dass nur der js Code einmal ausgeführt wird, wenn die Seite geladen wird.
Sie müssen definieren, dass onClick der Schaltfläche der Code ausgeführt werden soll. Verwenden Sie hierzu - $('button').click(function() {...});