How to get work live click function only inside exact div

Question

Let's say we have divs with class .row.

Currently my live click function looks like that:

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

What I want to do is to apply this function only to those divs, which are located inside exact div with class data. I mean

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

How can I do that?

FYI, `live` is deprecated. You should use `delegate` or `on` for jQuery 1.7+ — Rory McCrossan, May 03 '12 at 09:33

mreq · Accepted Answer · 2012-05-03T09:40:30.067

3

Use jQuery's .on()

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

If the .data is loaded asynchronously too, you can go a "step further"

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

Just replace 'body' with your wrap selector...

edited May 03 '12 at 09:40

answered May 03 '12 at 09:33

mreq

HTML dynamically changes by Ajax. So I'm using live. Please take a look at this question too http://stackoverflow.com/questions/10427570/delete-divs-by-2-classes-and-node-attribute – heron May 03 '12 at 09:38
If `.data` is loaded via AJAX too, check this edit. – mreq May 03 '12 at 09:40

score 1 · Answer 2 · answered May 03 '12 at 09:32

1

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

});

But Try to avoid live() instead use like following:

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

});

Or you can use delegate()

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

});

answered May 03 '12 at 09:32

thecodeparadox

Thx very much for your answer, sir. HTML dynamically changes by Ajax. So I'm using live. Please take a look at this question too http://stackoverflow.com/questions/10427570/delete-divs-by-2-classes-and-node-attribute – heron May 03 '12 at 09:37

score 1 · Answer 3 · answered May 03 '12 at 09:33

1

You could be a bit more specific with your selector i.e.

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

answered May 03 '12 at 09:33

phuzi

Please take a look at this question too http://stackoverflow.com/questions/10427570/delete-divs-by-2-classes-and-node-attribute – heron May 03 '12 at 09:37

score 0 · Answer 4 · edited May 23 '17 at 10:28

0

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

There you go.

The CSS selector > only picks "true" children. No grandchildren allowed.

edited May 23 '17 at 10:28

Community

answered May 03 '12 at 09:32

Robin Castlin

1

No, don't use `div.data` instead of `.data`. – mreq May 03 '12 at 09:33
Check this answer to my question: http://stackoverflow.com/a/9181607/910868 – mreq May 03 '12 at 09:36
Please take a look at this question too http://stackoverflow.com/questions/10427570/delete-divs-by-2-classes-and-node-attribute – heron May 03 '12 at 09:38
I find it easier to work with 'div.class' then '.class' because that helps me have a better overlook of what I'm working with. – Robin Castlin May 03 '12 at 09:40
I'd consider using comments then... The performance diff is quite large. – mreq May 03 '12 at 09:43
Yeah I suppose... I use div.class in css, so I simply find it logical to use it in jQuery aswell. Can't really see myself writing `$('.class');` though. – Robin Castlin May 03 '12 at 09:56

score 0 · Answer 5 · answered May 03 '12 at 09:35

0

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

answered May 03 '12 at 09:35

5 Answers5