Javascript Jquery函数只工作一次

我有一个表单和按钮，点击后会显示一条消息。问题是，现在消息在第一次单击时只显示一次。谁能解释一下我做错了什么

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

函数后注释（id）{
x=“#c”+id；
$（x）。单击（函数（）{
$（'.login_modal_message'）.fadeIn（500）；
$（'body'）。追加（''）；
$（'叠加'）.fadeIn（300）；
返回false；
$（'#覆盖，.close'）.live（'单击'，函数（）{
$（“#覆盖，.login_modal_message”）.fadeOut（300，函数（）{
$（“#覆盖”）.remove（）；
});
返回false；
});
});
};

HTML:

发送

如何触发此操作？因为您正在为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()
});

$（'.openName'）。单击（函数（事件）{
$（'.login_modal_message'）.fadeIn（500）；
$（'body'）。追加（''）；
$（'叠加'）.fadeIn（300）；
//return false；//除非您知道自己在做什么，否则不要返回false：
event.preventDefault（）
});
$（#overlay，.close'）.live（'click'，函数（事件）{
$（“#覆盖，.login_modal_message”）.fadeOut（300，function（）{
$（“#覆盖”）.remove（）；
}); 
//return false；//除非您知道自己在做什么，否则不要返回false：
event.preventDefault（）
});

---

---

fadeins的顺序有点奇怪，我不知道这是不是你想要的。首先是消息，然后是背景？

您应该将事件处理程序绑定到表单本身并捕获提交。像这样：

使用完整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>

---

更新：添加了

您正在使用哪个版本的jQuery？

live

的首选方法现在是

$（'#overlay'）。在（'.close'，click'，function（）{

哪个按钮不起作用？是在您提交评论时还是在您删除评论时？@Neil-。on首先接受事件，然后是可选选择器。您的示例应该是

$（'#overlay'）。on（'click'，'close'，function（）{

请注意，您没有正确关闭文本区域。您的第一个

返回false；

将停止每次执行其余函数。我将给出完整的草图。

<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>

#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;
}