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

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

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

Jquery函数只工作一次

2 个答案: