实现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或更高版本,那么最好的解决方案就是onAPI

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

注意:确保选择最靠近锚点所在位置的容器.这提高了搜索效率,以便在事件发生时找到它们.