在页面加载时，Javascript的点击发生火灾

Question

刚开始接触前端开发，尽管我的实践肯定很差，但我还是很喜欢。基本上，我正在尝试添加一个 onclick 函数到一个元素，当页面加载时。它工作得很好，因为。

$("li a:contains('Search')").ready(function(){
    $("li a:contains('Search')").on("click", function(){
$("li a:contains('Search)").text("test")});
});

但我的程序员的敏锐嗅觉被强烈地激活了 因为这段代码实在是太恶心了 所以我试图重构 我认为最简单的第一步重构是这样的

function replaceWithSearch(element){
    element.text("test");
}

$("li a:contains('Search')").ready(function(){
    $("li a:contains('Search')").on("click", replaceWithSearch($("li a:contains('Search')")));
});

然而，当我改成这样的时候 onclick 函数现在立即启动。有没有办法强制函数只在调用回调时才被评估？我更希望函数是可重用的，另外，如果你对重构我的代码或最佳实践有任何其他意见，我将非常高兴听到它们。再次强调，刚开始接触Javascript，我很想建立一些好的实践。

Answer 1

优化后的代码。

$(document).ready(function() {
    $("li a:contains('Search')").bind("click", function() {
        $(this).text("test");
    });
});

如果你喜欢用函数，正确的方法是：

$(document).ready(function() {
    $("li a:contains('Search')").bind("click", replaceWithSearch);
});

在函数中，你不必使用参数。

function replaceWithSearch(){
    $(this).text("test");
}

现场测试案例.

如果你的元素是在页面加载后创建的，请使用 .on() 像这样。

$(document).on("click", "li a:contains('Search')", replaceWithSearch);

更新的小提琴.

Answer 2

将处理程序包装在一个函数中，如。

$("li a:contains('Search')").ready(function(){
    $("li a:contains('Search')").on("click", function() {replaceWithSearch($("li a:contains('Search')"))});
});

这样，处理程序就会被定义，并与点击事件相关联，而不是立即执行。