0

刚开始在这里进行前端开发，但尽管我的实践确实很糟糕，但我一直很享受这些事情。基本上我试图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，我很想建立一些好的实践。

4

2 回答 2

3

优化代码：

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

更新了小提琴。

于 2013-07-15T13:56:57.097 回答
1

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

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

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

于 2013-07-15T13:56:56.013 回答