如何获得工作实时点击功能仅在确切的div内

Question

假设我们有类.row的div。

目前我的实时点击功能如下所示：

$(".row").live('click',function(event) {

我想做的是仅将此功能应用于那些div，这些div 位于具有类 data 的确切div 内。我的意思是

<div class="row">!don't apply!</div>
<div class="data">
   <div class="row">apply1!</div>
   <div class="row">apply2!</div>
</div>

我该怎么做？

Answer 1

使用 jQuery 的.on()

$('.data').on('click', '.row', function(){
  // function stuff
});

如果.data也是异步加载的，则可以"更进一步">

$('body').on('click', '.data .row', function(){
  // function stuff
});

只需将'body'替换为包装选择器即可...

Answer 2

$(".data > .row").live('click',function(event) {
});

但尽量避免live()而是像下面这样使用：

$('.data').on('click', '.row', function() {
});

或者您可以使用delegate()

$(".data").delegate(".row", "click", function(){
});

Answer 3

你可以更具体地使用你的选择器，即

$(".data > .row").live('click',function(event) {...

Answer 4

$('.data > .row').live('click',function(event) {

给你。

CSS 选择器>只选择"真正的"子项。不允许孙子孙女。

并且使用 on((，因为不再鼓励使用 live((。

Answer 5

$('.data > .row').live('click',function(event) {