jquery - 在 fadeIn() 之后使按钮可点击

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

根据您的标记，#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');
});​

Answer 2

$(".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/