负载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函数（）

回答

相关问题