Javascript onclick在頁面加載時發生火災

剛開始時在這裏有前端開發，但儘管我確實做得很差，但我一直在享受很多東西。基本上我試圖在頁面加載時向元素添加onclick函數。這是工作細如：Javascript 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，我很想建立一些良好的做法。

來源

2013-07-15 Slater Victoroff

我從來沒有在這方面看到過.ready（）。它通常在文檔準備就緒，然後調用一個函數來設置事件處理程序。 –

優化代碼：

$(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。

來源

2013-07-15 13:56:57

哦，太棒了。非常感謝。很好的解釋和優化的代碼更清潔。 –

Cheers @Slater我認爲所有元素都是固定的，對吧？意思是你不用代碼創建鏈接？ –

那麼，在mako模板而不是js中完成。有什麼我應該注意的嗎？ –

裹在類似功能的處理程序：

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

這樣一來，處理程序定義並與click事件相關聯，而不是立即執行。

來源

2013-07-15 13:56:56

Javascript onclick在頁面加載時發生火災

回答

相關問題