使按钮在淡入()后可单击

Question

>我有一个函数，当您将鼠标悬停在具有类"注释"的div 上时，它会在回复按钮中淡出。

我遇到的问题是使按钮在淡入时可点击。

$(".comment").hover(
        function() {
            $(this).children(".commentOptions").fadeIn();
            $(this).children("#reply").live('click',function(){
                alert('clicked'); 
            });
        },
        function() {
            $(this).children(".commentOptions").fadeOut();
        });

<div id="comment" class="comment">
      <div class="commentOptions">
          <div class="reply">
             <div class="button" id="reply">Reply</div>
          </div>
      </div>
</div>

在这方面的任何帮助都会很多学徒，谢谢。 :)

Answer 1

$(".comment").hover(
    function() {
        $(this).children(".commentOptions").fadeIn(1000, function(){
           $("#reply").on("click", replyClicked);
        });
    },
    function() {
        $(this).children(".commentOptions").fadeOut(1000, function(){
          $("#reply").off("click", replyClicked);
        });
});
function replyClicked(){
  alert("Clicked");
}

http://jsfiddle.net/S7rxh/

Answer 2

根据您的标记，#reply 不是 .comment 的子元素，因此为了从.comment解决它，您必须使用类似$("#reply", this)或更简单的$("#reply")（因为 ID 应该是唯一的）。此外，无需每次悬停元素时都绑定click事件，您可以执行一次。下面是一个示例：

$(".comment").hover(function() {
    $(this).children(".commentOptions").fadeIn();
}, function() {
    $(this).children(".commentOptions").fadeOut();
});
$("#comment").on("click", "#reply", function() {
    alert('clicked');
});​