Morpheus Morpheus - 4 months ago 15
Javascript Question

load a jquery function after docuemnt.ready()

I have the following code:

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>


And the corresponding javascript code:

$(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)

}


The interface looks like this after pressing the show search buttonenter image description here

The search doesn't work unfortunately and I am not sure how I can get it to work.I think the $(document).ready(function (){ }); has already been loaded after the show search button is displayed.

I am attaching the source files for easy working. excuse the sloppy coding.
https://transfer.sh/VUyG8/test.zip

Answer

Change your $(document).ready code to this:

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

When your ready code runs, the #PetitionsSearch field does not exist yet. So you need to use on method of jQuery.

You can see this in action at this Plunker: https://plnkr.co/edit/qTJfBcrf98gzAektzujp