Question

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <title>test</title>
        <style type="text/css">
        .button_test{
            border-radius: 4px;
            padding: 4px;
            cursor: pointer;
            background-color:#999; 
        }
        </style>
    </head>
    <body>
        <span class="button_test">debug</span>
        <script type="text/javascript">
        var testFunction = function(_callback){
            $(".button_test").click(function(){
                if ("function"==typeof(_callback)) {
                    _callback();
                };
            })
        }
        testFunction(function(){
            console.log(111);
        });
        </script>
    </body>
</html>

函数testFunction只使用了一次，所以我想当我第一次看到$(".button_test")时，控制台会输出111.然后无论我点击$(".button_test")多少次，控制台什么都不输出。
但实际上，每次点击$(".button_test")时，控制台都会输出111。

Answer 1

Click不会运行一次事件，它会在每次事件发生时运行。阻止它的唯一方法是取消绑定事件或在里面添加一个标志来表示不运行。但有一个更好的方法，因为jQuery有一个方法来运行一次事件，那将是one()

<强>一个（）

.one( events [, data ], handler(eventObject) )返回：jQuery

说明：将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。

您的代码可以像这样使用它

    var testFunction = function(_callback){
        $(".button_test").one("click", function(){
            if ("function"==typeof(_callback)) {
                _callback();
            };
        })
    }
    testFunction(function(){
        console.log(111);
    });

Answer 2

您正在click注册.button_test事件处理程序。除非您unbind事件发生，否则每次您点击该元素时都会启动它。

您描述的行为是预期的行为。

请参阅click和/或bind的文档。

Answer 3

作为点击处理程序附加到testfunction的{{1}}不是.button_test，而是执行console.log(111)的匿名函数。

在您运行.button_test之后，testfunction上的点击处理程序没有任何变化，因此每次按钮都会继续执行console.log(111)。

这个函数有什么问题（testFunction）

3 个答案: