jQuery Attaching a event to another event

Question

Specifically I'm looking to insert a mouse out event after a click. So suppose you have the following:

<div id="container">
 <a href="#" id="link">Link</a>
</div>

The behavior I'd want is after every "a#link" click, I want to insert a mouse out event on the "id#container" div -- basically only fire the mouse out event if there was a click. Is there a way to bind the two events and setup some kind of if checking variable?

Answer 1

$('#link').click(function(){
     $('#container').mouseout();
});

Answer 2

Try something like:

$('#link').click(function () { $(this).parent().mouseout(function() { } });

Answer 3

This should get close to what you describe:

$(function () {
  $('#container a').click(function () {
    $(this).parent().one('mouseleave', function () {
      // Whatever you want to happen on mouse out here.
    });
  });
});

That way the event only fires one time as the mouse leaves, but only if they clicked the link.