fadeOut（）親要素が戻る

Question

検索条件に一致しないdivを非表示にする検索機能があります。

HTML

<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> 

要素からページにロードされますこれらのdivの倍数があります。 これらのdivはすべてクラス.tfInputを持ち、idが"list"のフォームに追加されます。 divタグがあり、ID "searchElement"と検索ボックスがあり、ボタンがクリックされたか、検索ボックスにkeyup()イベントとされている場合、検索機能が呼び出される

<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> 

にロードされます

HTML。

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(); 
    } 
    }) 
}; 

問題

のdivをフェードアウトしかし、彼らは同じ秒以内に再表示されます。
彼らは決して隠れていません。
誰かが解決策ですか？ダブルクリックするとクリックinterpreteするのが好きjavascriptの未知の理由のため

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

：

Thxを

Answer 1

私は同様の問題:)のように、あなたのボタンをブロックするようにしてみました。

また、要素にデフォルトの「モード」がある場合、その要素に戻ることができます。これを防ぐために、event.preventDefault（）を使用しました。

3番目のオプションは、別の場所に隠していることです。

Forthオプション：各tfInput要素を使用しています。それで、最初の隠れた入力親を見つけます。 2番目の入力の親を検索します。 3番目の入力を隠す親がやり直してしまう。 同じ要素を切り替えます。

Answer 2

は、それが修正されました

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

Answer 3

代わりにこれを試してみてください。

ブートストラップが期待したことをしなかったため、CSSのプロパティを変更しました。

それはすべてを混乱させたエラーでした。

エラーはありますか？私はすべてのdivのdisplayプロパティをblock !importantに変更しました。そのため、彼らは再び現れました。

すべての入力をありがとう！