jQuery Duplicated object

Question

Hey guys,

I'm a little new to jQuery so bare with me! What im trying to do is when im 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");
    }
  );
});

Answer 2

Hey,

thanks for the feed back. I come from a c++ background so I can see I was a little confused by this.

Perhaps it was my fault for not being as specific as I could have been. Im looking to create a swap effect when you hover over a link (I know I put click event in there but it will be changed to hover). So:

1. When the mouse enters #links I want it to create a bool staying true if it's in there false if it has left.
2. if the mouse is:
3. swap the current image loaded out with the new image to be loaded else:
4. swap the current image loaded out with the default image.

I've created something that works, however it still has the problem I was facing before hand. Which you guys explained

    var jQ = jQuery.noConflict();
jQ(document).ready(function()
{
    jQ('#links').hover(
        // over
        function() 
        {
            mseOver();
        },

        // out
        function() 
        {
            mseOut();
        }
    );

    function mseOver()
    {
        jQ('#links li a').hover(function() {
            var img = jQ(this).attr("name");

            jQ("#image_swap").fadeOut("medium", function() {
                jQ(this).attr("src", img);
                jQ(this).fadeIn("medium");
            });
        });
    }

    function mseOut()
    {
            jQ("#image_swap").attr("src", "images/default.jpg")
    }