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/

在fadeIn（）之后使按钮可单击

2 个答案: