Javascript onclick在页面加载时激发

我只是从前端开发开始，但尽管我的实践确实很糟糕，但我一直很享受。基本上，我试图在页面加载时向元素添加

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开始，我希望建立一些良好的实践。

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

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

---

通过这种方式，处理程序被定义并与单击事件关联，而不是立即执行。

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

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

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

优化代码：

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

.

优化代码：

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

---

.

在这种情况下，我从未见过.ready（）。它通常在document ready上，然后调用一个函数来设置事件处理程序。它通常在文档就绪状态下，然后调用一个函数来设置事件处理程序。哦，太棒了。非常感谢。很好的解释，优化后的代码更干净。干杯@Slater我假设所有元素都是固定的，对吗？这意味着你不会用代码动态创建链接？好吧，用mako模板而不是js。有什么我应该注意的吗？如果元素是在页面加载后创建的，你需要使用

。on（）

，现在就可以编辑我的文章了。哦，太棒了。非常感谢。很好的解释，优化后的代码更干净。干杯@Slater我假设所有元素都是固定的，对吗？这意味着你不会用代码动态创建链接？好吧，用mako模板而不是js。有什么我应该注意的吗？如果元素是在页面加载后创建的，您需要使用

。on（）

，现在将编辑我的文章。