jquery - jquery，我的函数执行了很多时间而不是一个

Question

当我单击 .myClass 时，我希望在#message 之前出现“a”，但不幸的是，出现“aaaa a”而不是它。

我的CSS是：

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


 .hideIt{
    visibility:hidden;
}

我的代码是：

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

这里有一个小提琴链接：http: //jsfiddle.net/TDJVw/

Answer 1

在这里检查这个小提琴http://jsfiddle.net/TDJVw/1/它会做你想要的。

您的问题是click每次div悬停时您都在注册该方法。我移动了方法的click外部hover。

Answer 2

我已经更新了你的小提琴：

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

我将clickand事件处理程序移到处理mouseout程序之外mouseover

编辑：哎呀，我忘了将#message 添加到第二个 .on()

Answer 3

如果尝试

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

这会将“a”放置在“test1”位置。这是你的要求吗？