fadeOut() übergeordnetes Element kommt zurück

Question

Ich habe eine Suchfunktion, die die Divs verstecken muss, die nicht mit den Suchkriterien übereinstimmen.

HTML aus Elementen

<div class="form-group" id="number"> 
    <input class="form-control tfInput" id="tfInput1" type="text" value="test"> 
    <button type="button" class="btn btn-success" id="update1"> Save 
    </button> 
    <button type="button" class="btn btn-default" aria-label="Delete" id="delete1">Delete 
    </button> 
</div> 

Es gibt mehrere dieser divs, die in die Seite geladen werden. Alle diese divs haben die Klasse .tfInput und werden an das Formular mit der ID "list" angefügt.

HTML, wo die divs in

<form class="form-inline"> 
    <div class="form-group"> 
     <input class="form-control" type="text" id="searchElement" style="width: 200px" /> 
     <button type="button" class="btn btn-default" onclick="search()">search</button> 
    </div> 
</form> 



<div class="container"> 
    <form class="form-inline" id="list"></form> 
</div> 

geladen werden Es ist ein Suchfeld mit der ID "searchElement" und die Suchfunktion aufgerufen wird, wenn eine Schaltfläche geklickt wird oder mit einem keyup() Ereignis in das Suchfeld ein.

Javascript

function search() { 
    $.each($('#list .tfInput'), function(index, input) { 
    if (new RegExp($('#searchElement').val().toUpperCase()).test(input.value.toUpperCase())) { 
     $(input).parent().show(); 
    } else { 
     $(input).parent().fadeOut(); 
    } 
    }) 
}; 

Problem

Die divs Fadeout aber sie wieder innerhalb der gleichen Sekunde.
Sie bleiben nie versteckt.
Wer ist eine Lösung?

Thx

Answer 1

ich ähnliches Problem hatte :) Versuchen Sie, Ihre Taste zu blockieren, wie:

$("#Button").click(
      function(event) { 
        $(this).attr("disabled", true); 
        event.preventDefault(); 
        //your code 
        $(this).attr("disabled", false); 
      }; 
); 

Aus unbekannten Grund Javascript klicken als Doppelklick interpretieren mag.

Auch wenn Ihre Elemente einen voreingestellten "Modus" haben, kann sie zurückgehen. Um es zu verhindern, haben wir nur event.preventDefault() verwendet.

Die dritte Option ist, dass Sie es woanders verstecken.

Weiter Option: Sie verwenden jedes tfInput-Element. So findet es zuerst - Elternteile ausblenden. Findet die zweite - zeigen Sie die übergeordnete Eingabe an. Finds third - hide Eingaben wieder ect. Es schaltet das gleiche Element um.

Answer 2

Versuchen Sie stattdessen

$(input).fadeOut("slow"); 

Answer 3

Es ist nun festgelegt ist.

Ich habe einige CSS-Eigenschaft geändert, weil Bootstrap nicht das getan hat, was ich erwartet habe.

Das war der Fehler, der alles durcheinander brachte.

Mein Fehler? Ich änderte die display Eigenschaft für alle divs zu block !important und dadurch tauchte sie wieder auf.

Danke für alle Eingabe!