How to get a .click button to hide an alert box

Question

I have been creating a page out of json, and there is a simple log in. When the user ID and name matches that of my json file:

{
"user":[
{
"ID" : "001",
"imgpath":"image/zara.jpg",
 "message": " , We have new iphones avaiable",
 "name": "Zara Ali"

 },
 {
"ID" : "002",
"imgpath":"image/iphone5.jpg",
"prefer": "  Loves macs",
"name": "Laura Ali"
},
{
"ID" : "003",
"imgpath":"image/iphone5.jpg",
"message": "  Loves ipods",
"name": "Courtney Ali"
 },
 {
"ID" : "004",
"imgpath":"image/iphone5.jpg",
"message": "  Loves Ipads",
"name": "Max Ali"
}
]
}

So the name is almost like user name and the id is like password, when these match an alert pops up at the top of page containing the user's picture, name etc and if an invalid user tries to enter their details(not part of the json or username and password does not match an invalid alert appears) I also have a hide button that appears welcome user alert, i have it included but when i click it and try to add a .click hide() function this will not work.

This is my script so far including the button, in the script you will see this as part of the login alert:

<button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>

:

$(document).ready(function() {
//Hide alert when page loads
$("#loginalert").hide();
$("#invalid").hide();  
$("#loginbtn").click(function(event){
//console.log("clicked login");
$.getJSON('result.json', function(jd) {
  var id = $('#userName').val();
  var name = $('#userName2').val();
  var valid = false;
  //console.log(id);
  for (var i=0; i<jd.user.length; i++) {
    if ((jd.user[i].ID == id) && (jd.user[i].name == name)) {
        valid=true;
      $('#loginalert').html('<img src="' + jd.user[i].imgpath + '"><br><p> Welcome: ' + jd.user[i].name + '</p><button type="button" id="btnhide" class="btn btn-primary btn-md">Hide</button>');      
      //show the alert after loading the information  
        $("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)('slow', function () {
        //$("#invalid").hide();

    });
    }
  }
 if (!valid) {
    $('#invalid').fadeIn('slow');

 }

  }); });  });

So i need to make the button actually hide the #loginalert

many thanks guys

Answer 1

You can just delegate event:

$('#loginalert').on('click', '#btnhide', function(e){
    $(e.delegateTarget).hide(); // or `$('#loginalert').hide()`
});

Answer 2

I got this to work.. please see below:

$("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000)
                $('#invalid').hide();
                $('#btnhide').on('click', function(e){

                    e.preventDefault();
                    $('#loginalert').hide();
                });

            }
        }
        if (!valid) {
            $('#invalid').fadeIn('slow');
            $('#loginalert').hide();