Question

我知道这可能是一个简单的问题，但我似乎无法找到任何相关信息。我有以下代码：

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');
    }

};

点击时会添加“焦点”类，但由于点击也是一个焦点，它会在再次运行该功能时将其删除。我需要解除绑定然后重新绑定吗？

任何帮助都会很棒，欢呼！

Answer 1

<!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>

Click事件还会触发焦点事件，导致函数运行两次 - jQuery

1 个答案: