CODEWITHSUNDEEP
jquery
MEM
MEM

Reputation: 31397

Can we replace live for delegate on this case scenario?

This works.

$(document).ready(function(){
        $(".items article").click(function(){
            window.location=$(this).find("a").attr("href"); 
            return false;
         });
    });

However, when the user navigates to other records trough ajax on that same page, we got an irritant refresh. (not more irritant that my ignorance about how does that occur btw).

If I change the code to use delegate:

$(document).ready(function(){
        $(".items article").delegate('click', function(){
            window.location=$(this).find("a").attr("href"); 
            return false;
         });
    });

I still got the irritating refresh.

If I change it to live, I got it with no refresh.

$(document).ready(function(){
        $(".items article").live('click', function(){
            window.location=$(this).find("a").attr("href"); 
            return false;
         });
    });

I've read on stackoverflow that we should use delegate instead of live, on this case however, live seems to do the job while delegate doesn't. OR, am I using it wrongly ?

UPDATE: So, and using on, by taking the same examples as above:

$(document).ready(function(){ 
 $('#morespecifcelement').on('click','.items article', function() { 
  window.location=$(this).find("a").attr("href"); return false; 
 });
});

I still got the page refreshed.

Please advice,

Upvotes: 0

Views: 105

Answers (3)

Tadeck
Tadeck

Reputation: 137450

Short answer

.live() can (and should) always be replaced with .delegate() (.on() since jQuery 1.7).

Example

Instead of doing:

jQuery(selector).live(event_type, handler);

you can always do:

jQuery(document).delegate(selector, event_type, handler);

Why replace .live() with .delegate() (or .on())

You should avoid using .live(), because it is inefficient: it first executed selector (even though the element does not exist yet, so it cannot be found) and then attaches itself to document (which is again inefficient), unless you will use undocumented argument (which is disabled in newer versions of jQuery, as far as I know).

Note

That does not mean you should do exactly what is listed above - you should instead pick smaller element instead of document.

As of jQuery 1.7 you should use .on() instead of using .delegate() or .live().

Edit: Same using .on()

This piece of code does exactly what the previously listed examples do (except in a more efficient and modern way):

jQuery(document).on(event_type, selector, handler);

But again, attaching event handler to document is not a good idea, as all the events happening in it will influence the site performance.

More specific solution

The exact code that should work in your case is this:

$(document).ready(function(){ 
    $(document).on('click','.items article', function(event) {
        window.location=$(this).find("a").attr("href");
        return false;
    });
});

The reason it does not work in your case is probably one of these:

  1. You use jQuery older than 1.7 (where .on() is not available).
  2. The element matched by #morespecifcelement selector does not exist when the document is ready (it is probably introduced later).

Upvotes: 3

adeneo
adeneo

Reputation: 318362

If using jQuery 1.7+ you should do:

$(document).ready(function(){
    $(document).on('click', '.items article', function(){
        window.location=$('a', this).attr("href"); 
        return false;
     });
});

The best solution would probably be to fix whatever you did wrong previously to warrant the use of javascript to get the href attribute from a link and redirect to that adress, as that is normally the default action of the <a> element anyway ?

Upvotes: 0

John x
John x

Reputation: 4031

try 

$(document).delegate(".items article","click",function(){

}

Upvotes: 1

Related Questions