实现jQuery点击功能的最佳方式

我有一些动态创建的HTML代码，并且可能包含数十个锚点。我想为每个锚点添加一个点击处理程序，我可以想到许多不同的方法，但不知道选择哪一个。假设锚点有一个“myclass”类，点击时执行的代码每个都是相同的。实现jQuery点击功能的最佳方式

方法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会有效地创建数十个单独的函数，还是足够聪明，只需使用一个？

来源

2012-02-14 Rob

实际上，我认为'委托'已被弃用无论如何。我认为它现在已经开始。 – James 2012-02-14 15:44:27

我很确定'delegate'代替'live'作为jQuery 1.7，而'on'代替'bind'。来自api.jQuery.com的 – Rob 2012-02-14 15:49:41

：“从jQuery 1.7开始，.delegate（）已被.on（）方法取代。” – CompanyDroneFromSector7G 2012-02-14 15:56:26

如果有一些容器，它包含了所有这些锚和你使用jQuery 1.7或以上，然后最好的解决办法是on API

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

注：请务必选择最接近的位置的容器，其中锚住。这提高了搜索在事件火灾中找到它们的效率。

来源

2012-02-14 15:45:53 JaredPar

我认为同样重要的是要注意，将DOM绑定到元素所在的位置，因为每当事件触发时，jQuery将需要搜索与其匹配的所有节点。 – Andrew 2012-02-14 15:48:29

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

这应该涵盖所有基地。

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

为了解决“不，如果链接动态添加”点：

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

当然，这需要在每台更多的HTML动态添加时间重新运行，但这是每一个解决方案相同在此列出。

来源

2012-02-14 15:44:09 CompanyDroneFromSector7G

如果元素是动态添加的，则不适用。 – 2012-02-14 15:46:11

这没有用，因为当动态添加元素时，事件不会被触发！ – 2012-02-14 15:50:05

错了EvilP - 见第二部分 – CompanyDroneFromSector7G 2012-02-14 15:50:32

使用live

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

现场还增加了事件处理程序以新创建的元素。

编辑：
使用on相反，如果你使用jQuery 1.7：

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

来源

2012-02-14 15:45:45 rcdmk

.live（）不推荐使用，可以在将来的任何版本的jquery中删除... – 2012-02-14 15:46:28

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

但是对于jQuery 1.7，你有'on'来绑定事件。

来源

2012-02-14 15:46:05

我相信你的意思是jQuery 1.7不是1.9 – JaredPar 2012-02-14 15:50:41

是的！当然... – 2012-02-15 08:33:49

使用.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解释说，简单的例子很好理解和简单。

来源

2012-02-14 15:49:11

我喜欢“关于”关键字（新对我来说！）。只要父母为所有元素工作。 – CompanyDroneFromSector7G 2012-02-14 16:18:48

实现jQuery点击功能的最佳方式

回答

相关问题