實現jQuery點擊功能的最佳方式

Question

我有一些動態創建的HTML代碼，並且可能包含數十個錨點。我想爲每個錨點添加一個點擊處理程序，我可以想到許多不同的方法，但不知道選擇哪一個。假設錨點有一個「myclass」類，點擊時執行的代碼每個都是相同的。

方法1

$(document).delegate(".myclass", "click", function() { 
    // Do some work 
}); 

方法2：

var $a = $("<a href='#' class='myclass'>Text</a>"); 
$a.bind("click", function() { 
    // Do some work 
}); 

方法3：

function clickHandler() { 
    // Do some work 
} 

var $a = $("<a href='#' class='myclass'>Text</a>"); 
$a.bind("click", function() { 
    clickHandler(); 
}); 

我喜歡方法2作爲處理函數代碼就是在創建錨點並將其添加到DOM的地方，但是如果我有很多這樣的錨點，那麼JavaScript會有效地創建數十個單獨的函數，還是足夠聰明，只需使用一個？

Answer 1

如果有一些容器，它包含了所有這些錨和你使用jQuery 1.7或以上，然後最好的解決辦法是on API

$('#theContainer').on('click', 'a.myclass', function() { 
    // Click Handler 
}); 

注：請務必選擇最接近的位置的容器，其中錨住。這提高了搜索在事件火災中找到它們的效率。

Answer 2

$('.myclass').click(function() { 
    // do something 
}); 

這應該涵蓋所有基地。

據我所知，它應該爲每個控件創建一個單獨的實例，但它完全是OO，因此應該非常高效。

爲了解決「不，如果鏈接動態添加」點：

$('.myclass').unbind('click').click(function() { 
    clickHandler(); 
}); 

當然，這需要在每臺更多的HTML動態添加時間重新運行，但這是每一個解決方案相同在此列出。

Answer 3

使用live

$(".myClass").live("click", clickHandler); 

現場還增加了事件處理程序以新創建的元素。

編輯：
使用on相反，如果你使用jQuery 1.7：

$(".myClass").on("click", clickHandler); 

Answer 4

方法2更好的是你不需要有'活'事件（即在綁定事件後在DOM中添加元素）。

但是對於jQuery 1.7，你有'on'來綁定事件。

Answer 5

使用.on()有一種方法，您可以將一個事件偵聽器添加到div。所以，你會對DIV一個事件偵聽器，所有的錨放置：

$('#navigation').on('click', 'a.myclass', function() { 
    //Handler 
}); 

• http://api.jquery.com/on/
  官方文檔。這給你帶來更多的效率。也許你還應該看看http://tutsplus.com/course/30-days-to-learn-jquery/課程。 Jeffrey Way解釋說，簡單的例子很好理解和簡單。