JQUERY 1.9 ,1.10, 1.11 conflict with code

Question

I have this piece of code , that does not work , if I link JQUERY above 1.8.0 Just for curiosity, why its happening? it takes values from select boxes, passing to pagination.php file and in the meantime showing loading image // Pagination

       $(document).ready(function () {
       function loading_show() {
           $('#loading').html("<img src='img/loading.gif'/>").fadeIn('fast');
       }

       function loading_hide() {
           $('#loading').fadeOut('fast');
       }

       function loadData(page) {
           var house_id = $("#pbthouse option:selected").val();
           var sale_id = $("#pbtsale option:selected").val();
           var year_id = $("#pbtsale option:selected").val();
           var ipp = $("#res option:selected").val();
           loading_show();
           $.ajax({
               type: "POST",
               url: "pagination.php",
               //data: "page="+page,
               data: {
                   page: page,
                   house_id: house_id,
                   year_id: year_id,
                   sale_id: sale_id,
                   ipp: ipp
               },
               success: function (msg) {
                   $("#container1").ajaxComplete(function 
                 (event, request,settings) 
              {
                       loading_hide();
                       $("#container1").html(msg);
                   });
               }
           });
       }
       loadData(1); // For first time page load default results
       $('#container1 .pagination li.active').live('click', function () {
           var page = $(this).attr('p');
           loadData(page);
       });
       $('#go_btn').live('click', function () {
           var page = parseInt($('.goto').val());
           var no_of_pages = parseInt($('.total').attr('a'));
           if (page != 0 && page <= no_of_pages) {
               loadData(page);
           } else {
               alert('Enter a PAGE between 1 and ' + no_of_pages);
               $('.goto').val("").focus();
               return false;
           }
       });
       $('#container1 .pagination    li.active').live('click', function () {
           var page = $(this).attr('p');
           loadData(page);
       });
       $("#pbthouses").change(function () {
           var page = '1';
           loadData(page);
       });
       $("#res").change(function () {
           var page = '1';
           loadData(page);
       });
       $('#pbtsale, #pbtyear').change(function () {
           var sale_id = $("#pbtsale option:selected").val();
           var sale_id = $("#pbtyear option:selected").val();
           var page = '1';
           if (sale_id != '') {
               $.ajax({
                   type: "POST",
                   url: "get_pbtsales.php",
                   data: {
                       year_id: year_id,
                       sale_id: sale_id
                   },
                   success: function (option) {
                       $("#pbhouses").html(option);
                       loadData(page);
                   }
               });
           } else {
               $("#pbhouses").html("<option value=''
>-- No category selected --</option>");
           }
           return false;
       });
   });

for one you are using `live()` which was [removed](http://jquery.com/upgrade-guide/1.9/#live-removed) in jQuery 1.9 — Arun P Johny, Feb 16 '14 at 15:35
Yeah, I am pretty sure `live` is depreciated. It is now `on`. Also, please provide more info on what line the error is on etc.. maybe the actual console output with exception details... — Michael Coxon, Feb 16 '14 at 15:36
why not check your console??? BTW, be aware of jQuery migrate: http://blog.jquery.com/2013/05/08/jquery-migrate-1-2-1-released/ — A. Wolff, Feb 16 '14 at 15:47

score 4 · Accepted Answer · edited May 23 '17 at 11:58

Support for .live() has been deprecated since version 1.7 and removed since version 1.9. You should switch to the dynamic form of .on() which would change from this:

$('#go_btn').live('click', function () {

to this:

$(document).on('click', '#go_btn', function () {

Ideally, instead of $(document), you would pick a closer parent of #go_btn that is static (e.g. not dynamically created) as this is more efficient than using $(document), particularly if you have a number of delegated event handlers like this.

Some references for delegated event handling with .on():

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Should all jquery events be bound to $(document)?

Does jQuery.on() work for elements that are added after the event handler is created?

JQUERY 1.9 ,1.10, 1.11 conflict with code

1 Answers1