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 に答える