0

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

查询：

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

2 回答 2

0

你如何触发这个？因为您正在使用一个函数来完成事件处理程序可以做的事情

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

淡入淡出的顺序有点奇怪，我不知道这是否是你想要的。首先消息来了，而不是淡出背景？

于 2013-08-20T18:53:56.193 回答
0

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

使用完整的 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 草图。

于 2013-08-20T18:59:55.570 回答