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

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.