Question

I have a function which when you hover over the div which has the class “comment” fades in a reply button.

The problem I am having is making the button clickable when it fades in.

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

Any help on this would be much apprenticed, thank you. 🙂

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/