JQUERY 1.9 ,1.10, 1.11 与代码冲突

Question

我有这段代码，如果我将 JQUERY 链接到 1.8.0 以上，它不起作用 只是为了好奇，为什么会发生？ 它从选择框中获取值，传递给 pagination.php 文件，同时显示加载图像 // 分页

       $(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;
       });
   });

Answer 1

对 .live() 的支持自 1.7 版以来已被弃用，自 1.9 版以来已被删除。您应该切换到 .on() 的动态形式，这会改变：

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

到这里：

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

理想情况下，您应该选择与#go_btn 更接近的静态父级（例如非动态创建），而不是$(document)，因为这比使用$(document) 更有效，特别是如果您有许多委托事件像这样的处理程序。

使用.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?