Question

Within a div container (#links) I want to be able to hover over the links then perform an action (to be implimented later). When I exit the div box (#links) I want a different action to take place.

The problem: Hovering into the div container (#links) works. When I goto click on a link it logs the attribute as asked. However when I leave the div container (#links) and go back in, click on a link instead of a single log event being displayed. Next time I do that, it shows it 3 times, 4 times etc…

The html:

<div id="links">
    <ul>
        <li><a href="javascript:void(0)" name="link_1" >link 1</a></li>
        <li><a href="javascript:void(0)" name="link_2" >link 2</a></li>
        <li><a href="javascript:void(0)" name="link_3" >link 3</a></li>
        <li><a href="javascript:void(0)" name="link_4" >link 4</a></li>
        <li><a href="javascript:void(0)" name="link_5" >link 5</a></li>
    </ul>
    </div>

The JS:

var jQ = jQuery.noConflict();
        jQ(document).ready(function()
        {

                jQ("#links").hover(
                    function() {
                        console.log("links over")
                        jQ("a").click(function() {
                            console.log(this)
                        })
                    },
                    function() {
                        console.log("links out")
                    }
                );
        });

Console:
note:: all the “a” attributes are a result of a SINGLE click.

links over

a name=”link_5″ href=”javascript:void(0)”

links out

links over

a name=”link_5″ href=”javascript:void(0)”

a name=”link_5″ href=”javascript:void(0)”

links out

Answer 1

Don’t define your $.click() method within $.hover(); Each time you hover, you’re adding yet another event to the click:

jQ("a").click(function() {
  console.log(this)
})

That should be extracted from your $.hover() call.

var jQ = jQuery.noConflict();
jQ(document).ready(function()
{
  jQ("a").click(function() {
    console.log(this)
  });

  jQ("#links").hover(
    function() {
      console.log("links over");
    },
    function() {
      console.log("links out");
    }
  );
});