jquery函數只工作一次

Question

我有一個窗體和按鈕，點擊後應該顯示一條消息。問題是現在消息只顯示一次，第一次點擊。有人可以解釋我做錯了什麼嗎？

JQUERY：

function post_comment(id) { 
    x = "#c" + id; 
    $(x).click(function() { 
     $('.login_modal_message').fadeIn(500); 
     $('body').append('<div id="overlay"></div>'); 
     $('#overlay').fadeIn(300); 
     return false; 

     $('#overlay, .close').live('click', function() { 
      $('#overlay , .login_modal_message').fadeOut(300, function() { 
       $('#overlay').remove(); 
      }); 
      return false; 
     }); 
    }); 
}; 

HTML：

<form id="c408" method="post"> 
    <textarea class="comment_input" name="comment" placeholder="Write your comment here..."> 
    <input id="post_id" hidden="hidden" value="408" name="post_id"> 
    <button class="comment_button" onclick="post_comment(408)">Send</button> 
</form> 

Answer 1

你怎麼觸發的？因爲你正在使用的東西，一個功能的事件處理程序可以做

$('.openName').click(function(event) { 
    $('.login_modal_message').fadeIn(500); 
    $('body').append('<div id="overlay"></div>'); 
    $('#overlay').fadeIn(300); 
    //return false;// Never return false unless you know what you are doing: 
    event.preventDefault() 
}); 

$('#overlay, .close').live('click', function(event) { 
    $('#overlay , .login_modal_message').fadeOut(300 , function() { 
     $('#overlay').remove(); 
    }); 
    //return false;// Never return false unless you know what you are doing: 
    event.preventDefault() 
}); 

---

fadeins的順序是有點不可思議，我找不出閹這是你想要的。首先消息來了，比淡出背景？

Answer 2

您應該將事件處理程序綁定到表單本身並捕獲提交。像這樣：

與

UPDATE全jQuery的

function post_comment(id) { 
    x = "#c" + id; 

    $(x).submit(function() { 
    $('#overlay').fadeIn(300); 

    return false; 
    }); 
} 

$('#close-modal').on('click', function(event) { 
    event.preventDefault(); 

    $('#overlay').fadeOut(); 
}); 

HTML

<form id="c408" method="post"> 
    <textarea class="comment_input" name="comment" placeholder="Write your comment here..."></textarea> 
    <input id="post_id" hidden="hidden" value="408" name="post_id" /> 
    <button class="comment_button" onclick="post_comment(408)">Send</button> 
</form> 

<div class='overlay' id='overlay'> 
<div class='login_modal_message' id='login_modal_message'> 
    <p>Message</p> 
    <a href='#' id="close-modal">Close modal</a> 
</div> 

CSS

#overlay { 
    background: rgba(0, 0, 0, 0.85); 
    bottom: 0; 
    display: none; 
    height: 100%; 
    left: 0; 
    position: fixed; 
    right: 0; 
    top: 0; 
} 

.login_modal_message { 
    background: white; 
    bottom: 0; 
    height: 100px; 
    left: 0; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    width: 200px; 
} 

更新：增加了Codepen sketch.