jQuery .live, click, bind etc which to use

Question

This may sound "silly" but I have a simple calendar that is loaded onto the page like this:

jQuery('#calendar .show_hide').load('plugins/calendar.html', function(){ // do something // });

That is not a problem

The calendar has 2 links that should scroll through the months - typical next prev links. So inside my load function I have this

jQuery('#calendar .show_hide').load('plugins/calendar.html', function(){
   jQuery('a.month_change').on('click',function(){  
    jQuery.ajax({
      type: "post",
      data: jQuery(this).attr('href').replace('#',''),
      url:  'plugins/calendar.html',
      success:function(msg){
        jQuery('#calendar .show_hide').html(msg);
                  }
    });
});

});

where a.month_change is a class attached to the prev/next links. The Ajax post sends the data and returns the html. So far so good.

The first time you click a.month_change it works, but every time afterwards the page is not loaded. if I try .live('click;,function ... nothing happens the first time, nor any other.

I always get confused on these things, which is the correct way to dynamically load the page and then have the ajax calls/links etc. always work. Note the dynamic load and the ajax receiving page are the same page - plugins/calendar.html and JQ version is jquery-1.9.0

http://www.jquery4u.com/jquery-functions/on-vs-live-review/ – palaѕн Feb 28 '13 at 09:19 — palaѕн, Feb 28 '13 at 09:19

score 3 · Answer 1 · answered Feb 28 '13 at 09:11

3

Live is deprecated since 1.7 and removed in 1.9 you must use it like this

$(document).on('click','selector',function(){

});

You should use the closest static element instead of document if you have one closer.

answered Feb 28 '13 at 09:11

Anton

32,245
5
44
54

1

Anton - PERFECT thanks will accept as soon as can – Watkin Parrot Feb 28 '13 at 09:15

score 2 · Answer 2 · answered Feb 28 '13 at 09:11

2

live() is depreciated, you should use the on() function instead.

$(document).on('click','selector',function(){

});

answered Feb 28 '13 at 09:11

dsgriffin

66,495
17
137
137

As per comment above it is .on('click' .. already – Watkin Parrot Feb 28 '13 at 09:13

score 1 · Answer 3 · answered Feb 28 '13 at 09:14

None of the answers here effectively show you how to use it, OR the documentation, so here you go.

jQuery(document).on('click', 'a.month_change', function(){ 
    jQuery.ajax({ 
        type: "post", 
        data: jQuery(this).attr('href').replace('#',''), 
        url: 'plugins/calendar.html',             
        success:function(msg){ 
            jQuery('#calendar .show_hide').html(msg); 
        } 
    }); 
});

Where the first element we target is a static element that exists during page load, then the event we wish to capture, followed by the element that should have the event bound to it. This is event delegation in newer versions of jQuery. You don't need to use .live(), or .bind().

Here's the documentation for jQuery's .on()

score 0 · Answer 4 · answered Feb 28 '13 at 09:11

use .on() because it also works on dynamically added DOM.

.live() is deprecated from new version.

Run Test

try

<script type="text/javascript">

    $(function()
    {
        jQuery('a.month_change').on('click',function()
        {
            jQuery.ajax(
            {
                type: "post",
                data: jQuery(this).attr('href').replace('#',''),
                url:  'plugins/calendar.html',
                success:function(msg)
                {
                    jQuery('#calendar .show_hide').html(msg);
                }
            });
        });

        jQuery('#calendar .show_hide').load('plugins/calendar.html', function()
        {

        });    
    });

</script>

If you look at the code it is .on('click', .... but that still doesn't work. If my phrasing is correct I think it means the event is not binding on the reload — Watkin Parrot, Feb 28 '13 at 09:12

score 0 · Answer 5 · answered Feb 28 '13 at 09:11

0

best is use Jquery on method. .live() is deprecated from new version.

for eg;

$('#yourElement').on('click',function(){});

answered Feb 28 '13 at 09:11

Ravi Gadag

15,735
5
57
83

score 0 · Answer 6 · edited Feb 28 '13 at 09:15

0

Try

$(parentcontainer).on('click',elementtoclick,function(...){....});

Usually bind in this way solved my problems with new HTML contents

edited Feb 28 '13 at 09:15

Anton

32,245
5
44
54

answered Feb 28 '13 at 09:12

Razorphyn

1,314
13
37

bipen · Answer 7 · 2013-03-08T13:24:31.103

0

i prefer and recommend you to use on() .. you can have a look to this post to learn more about on direct and delegated methods ....

$(document).on('click','yourselector',function{....});

this delegates the click event to document which is always static.. and finds the selector to put th events on.... however, using closest static element is always preferred since document is not good performances wise.

edited Mar 08 '13 at 13:24

answered Feb 28 '13 at 09:16

bipen

36,319
9
49
62

score 0 · Answer 8 · answered Feb 28 '13 at 09:17

.click and .bind are binding with dom element currently present in the DOM during page load.

.live is one used to attach event for element which might be filled in DOM later either by Ajax or Javascript. But .live have major issue related to performance.

To over come this $.delegate where introduce with better performance in DOM Hierarchy.

With Latest Jquery 1.7 or above coming in place .on is used which used to bind event to element ( Run Time ) whenever element will be filled in DOM. It have improved performance then .live you can have more information on this site http://api.jquery.com/live/ Which will provide to insite of jQuery event binding

andyb · Answer 9 · 2013-02-28T10:11:37.933

Since none of the other answers address the point you make that:

The first time you click a.month_change it works, but every time afterwards the page is not loaded

then let me attempt to explain…

Your code is actually making two AJAX calls, one from .load() and one from .ajax()

The problem of the click events only firing once is caused because you are replacing the HTML of the calendar in the success handler for the .ajax() call with jQuery('#calendar .show_hide').html(msg); thereby replacing the a.month_change elements that you previously bound the click handler on.

The fix is to move the click event binding to be captured on an element in the page that is not being replaced by any AJAX call.

For example on the #calender element:

jQuery('#calendar').on('click', 'a.month_change', function(){ ... });

So you can therefore replace all content inside the #calendar and the click events will still be captured and then filtered by the click handler on the static ancestor element.

As the other answers have mentioned that .live() is removed in v1.9 you are using the correct .on() method but just in the wrong place.

jQuery .live, click, bind etc which to use

9 Answers9