Функция 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

Как вы вызываете это? Поскольку вы используете функцию для чего-то EventHandler может сделать

$('.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

Вы должны привязать обработчик событий к самой форме и поймать submit. Как так:

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.