jquery, my function is executed a lot of time instead of one

Question

when i'm clicking on .myClass I want 'a ' to appear before #message unfortunately 'a a a a a' appear instead of it.

My css are:

    #message{
    width: 80%;
    height: 10%;
    border-style:solid;
    border-width:5px;
}


 .hideIt{
    visibility:hidden;
}

and my code is:

<div id="message">test1 <span class="myClass hideIt">test2</span></div>

    <script src="jquery.js"></script>
    <script>
    $(function() {

        test = function() { $('#message').before('a '); }

        $(document).on('mouseover', '#message', function () {
            var el = $(this);
            el2 = el.children('.myClass');
            el2.removeClass('hideIt');
            el2.on('click',test);
            el.on('mouseout', function() {
                el2.addClass('hideIt');
            });
        });

    });
    </script>

here a Fiddle link: http://jsfiddle.net/TDJVw/

Answer 1

I've updated your fiddle:

http://jsfiddle.net/TDJVw/8/

$(document).on('mouseover', '#message', function () {
    $(this).find('.myClass').removeClass('hideIt');
}).on('mouseout', '#message', function() {
    $(this).find('.myClass').addClass('hideIt');
})

$('#message .myClass').on('click', test);

I moved the click and mouseout event handlers outside of the mouseover handler

Edit: oops, I forgot to add #message to the 2nd .on()

Answer 2

Check this fiddle here http://jsfiddle.net/TDJVw/1/ it will do what you want.

Your problem was that you was registering the click method each time the div was hovered. I moved the click outside of the hover method.

Answer 3

If try

test = function() { $('#message').html('a '); }

This will place 'a' at 'test1' place. Is this your requirement?