負載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) 

    }

界面看起來像這樣按下顯示搜索按鈕後

搜索不會w不幸的是，我不知道如何才能讓它工作。我認爲$（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領域還不存在。所以你需要使用的on方法。

您可以在此Plunker在行動中看到這一點：https://plnkr.co/edit/qTJfBcrf98gzAektzujp

來源

2016-08-02 15:42:59

它不工作的原因是，你追加到DOM之前event listener上 #PetitionsSearch連接，因此它不工作。

嘗試添加代碼：

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

到DisplaySearchResults()函數的末尾，而不是$(document).ready

來源

2016-08-02 15:45:41 Bamieh

負載docuemnt.ready後一個jquery函數（）

回答

相關問題