如何獲取.click按鈕以隱藏警報框

Question

我一直在用json創建頁面，並且有一個簡單的登錄信息。當用戶ID和名稱與我的json文件的名稱匹配時：

{
"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"
}
]
}

因此，名稱幾乎就像用戶名，而id就像密碼，當這些匹配時，在頁面頂部彈出一個警報，其中包含用戶的圖片，姓名等，並且如果無效的用戶嘗試輸入其詳細信息（不是json的一部分）或出現用戶名和密碼不匹配的無效警報）我還有一個隱藏按鈕，其中顯示歡迎用戶警報，我已將其包含在內，但是當我單擊它並嘗試添加.click hide（）函數時，它將不起作用。

到目前為止，這是我的腳本，包括按鈕，在腳本中，您將看到此作為登錄警報的一部分：

<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');

 }

  }); });  });

所以我需要使按鈕實際上隱藏#loginalert

非常感謝你們

Answer 1

您可以委托事件：

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

Answer 2

我有這個工作..請看下面：

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