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

Live test case

如果您的元素是在页面加载后创建的，请使用.on()，如下所示：

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

Updated fiddle

Answer 2

将处理程序包装在如下函数中：

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

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

Javascript onclick会在页面加载时触发

2 个答案: