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

方法2更好的是你不需要'live'事件（即在绑定事件后在DOM中添加元素）。

但是使用jQuery 1.7，你可以“绑定”事件。

Answer 3

使用.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在简单的例子中解释说，这些例子易于理解且容易理解。

Answer 4

使用live

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

Live还会将事件处理程序添加到新创建的元素中。

修改
如果您使用的是jquery 1.7：

，请改用on
$(".myClass").on("click", clickHandler);

Answer 5

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

这应涵盖所有基础。

据我所知，它应该为每个控件创建一个单独的实例，但它完全是OO所以应该非常高效。

解决＆＃34;而不是动态添加链接＆＃34;点：

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

当然，每次动态添加更多HTML时都需要重新运行，但这对于此处列出的每个解决方案都是相同的。

实现jQuery单击函数的最佳方法

5 个答案: