負荷docuemnt.ready後jqueryの関数（）

I次のコードを持っている：負荷docuemnt.ready後jqueryの関数（）

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="row"> 
      <div class="panel"> 
      <button type="button" class="reveal" onclick="DisplaySearchResults()">Show Search</button> 
    </div> 
</body> 
</html>

とそれに対応するJavaScriptコード：

$(document).ready(function() { 

    var $button = $('.displayButtons'); 

    $('#PetitionsSearch').keyup(function() { 
     var re = new RegExp($(this).val(), "i"); // case-insensitive 
     $button.show().filter(function() { 
      return !re.test($(this).text()); 
     }).hide(); 
    }); 
    }); 

    function DisplaySearchResults(){ 
     var s = '<input type="text" id="PetitionsSearch" placeholder="Type to search">'+ 
       '<br>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">AA1009</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">AA1010</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">BA1098</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">BB1890</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">C89761</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">CD1667</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">GG7830</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">GF6537</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">BH6537</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">HGB562</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">LK9063</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">CP9871</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">IRON87</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">ACT567</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">MPO760</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">GH5436</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">NBH894</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">GHFDF6</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">US4536</button>'+ 
        '<button type="button" class="btn btn-secondary displayButtons">MO9854</button>'+ 
        '</div>'; 

     $(".panel").append(s) 

    }

インターフェースは次のようになりますショー検索ボタンを押した後

検索はしませんorkは残念なことに、私はどのように動作させることができるのかよく分かりません。私は$（document）.ready（function（）{}）と思っています。表示検索ボタンが表示された後に既に読み込まれています。
簡単に作業できるようにソースファイルを添付しています。汚いコーディングを許してください。 https://transfer.sh/VUyG8/test.zip

出典

2016-08-02 Morpheus

はこれにあなたの $(document).readyコードを変更

：

$(document).ready(function() { 
    $(".panel").on('keyup', '#PetitionsSearch', function() { 
    var $button = $('.displayButtons'); 
    var re = new RegExp($(this).val(), "i"); // case-insensitive 
    $button.show().filter(function() { 
     return !re.test($(this).text()); 
    }).hide(); 
    }); 
});

あなたreadyコードが実行されると、#PetitionsSearchフィールドがまだ存在していません。だから、jQueryのonメソッドを使用する必要があります。あなたはこのPlunkerでこの動作を確認することができます

：そのは動作していないhttps://plnkr.co/edit/qTJfBcrf98gzAektzujp

出典

2016-08-02 15:42:59

理由は、したがって、それは仕事をdoesntの、あなたはDOMにそれを追加する前に #PetitionsSearchにevent listenerを装着していることです。代わりに$(document).ready

の DisplaySearchResults()関数の最後に

$('#PetitionsSearch').keyup(function() { 
    var re = new RegExp($(this).val(), "i"); // case-insensitive 
    $button.show().filter(function() { 
     return !re.test($(this).text()); 
    }).hide(); 
});

：あなたのコードを追加すること

試してみます

出典

2016-08-02 15:45:41 Bamieh

負荷docuemnt.ready後jqueryの関数（）

答えて

関連する問題