Geek asks and answers

The Click event also raises a focus event, causing the function to fire twice - jQuery

I know this is probably a simple problem, but I cannot find anything about it. I have the following code:

var moreitemsdiv = $('.moreitemsdiv');

$('.moreitemsanchor').bind("focus click", function(){
    showList(this);
    return false
});

function showList(this_anchor){
    var thismoreitemsdiv = $(this_anchor).next(moreitemsdiv);
    if ($(thismoreitemsdiv).hasClass('focus')) {
        $(thismoreitemsdiv).removeClass('focus');
    } else {
        $(moreitemsdiv).removeClass('focus');
        $(thismoreitemsdiv).addClass('focus');
    }

};

The "focus" class is added to the click, but as the click is also the focus, it then removes it when it starts the function again. Do I need to untie and then bind again or something else?

Any help would be great, cheers!

+3
source share
1 answer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var moreitemsdiv = $('.moreitemsdiv');

            //            $('.moreitemsanchor').bind('focus', function (e) {
            //                showList($(this));
            //            });

            //            function showList(this_anchor) {
            //                var thismoreitemsdiv = this_anchor.next(moreitemsdiv);
            //                if (thismoreitemsdiv.hasClass('focus')) {
            //                    thismoreitemsdiv.removeClass('focus');
            //                } else {
            //                    moreitemsdiv.removeClass('focus');
            //                    thismoreitemsdiv.addClass('focus');
            //                }
            //            };

            $('.moreitemsanchor').bind('focus', function (e) {
                var obj = $(this);
                $('.moreitemsanchor').removeClass('focus');
                obj.addClass('focus');
            });
        });
    </script>
    <style type="text/css">
        .focus
        {
            border-color: Green;
        }
    </style>
</head>
<body>
    <input type="text" class="moreitemsanchor" value="a" />
    <input type="text" class="moreitemsanchor" value="b" />
    <input type="text" class="moreitemsanchor" value="c" />
    <input type="text" class="moreitemsanchor" value="d" />
</body>
</html>
0
source

More articles:


All Articles