JQuery, Dlaczego to nie pokazuje przycisku po wypełnieniu danych wejściowych? - javascript, jquery

Próbuję pokazać / ukryć przycisk, gdy powiązane z nim dane wejściowe są puste (w tym przypadku pasek wyszukiwania).

Korzystam z tego Javascript:

if(!$(".sb-search-input").val()){
$(".sb-search-submit.button-search").hide();
}
else {
$(".sb-search-submit.button-search").show();
}

i mój HTML:

            <div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Szukaj..." type="search" value="" name="search" id="search" onkeyup="buttonUp();" required>
<input class="sb-search-submit button-search" type="button" value="">
</form>
</div>

Przeszukiwanie przycisku sb-search-upload jest zawsze wyłączone i nie włącza się, gdy wejście sb-search ma wartość.

Odpowiedzi:

Spróbuj wykorzystać input wydarzenie; e.target.value.length === 0 w if stan: schorzenie ; .trigger() zadzwonić input obsługa zdarzeń w $(document).ready() Alias $(function() {})

$(function() {
$(".sb-search-input").on("input", function(e) {
if (e.target.value.length === 0) {
$(".sb-search-submit.button-search").hide();
} else {
$(".sb-search-submit.button-search").show();
}
}).trigger("input")
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sb-search" class="sb-search">
<form>
<input class="sb-search-input" placeholder="Szukaj..." type="search" value="" name="search" id="search" required>
<input class="sb-search-submit button-search" type="button" value="">
</form>
</div>