JQUERY, MY FUNCTION IS EXECUTED A LOT OF TIME INSTEAD OF ONE

Ankita Pandey

Total Post:183

Points:1285
Posted by  Ankita Pandey
JQuery 
 1080  View(s)
Ratings:
Rate this:
Hi Everyone!

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/

Thanks in advance! 

  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: jquery, my function is executed a lot of time instead of one

    Hi Ankita!

    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

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!