2

这可能听起来“愚蠢”，但我有一个简单的日历，它像这样加载到页面上：

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

这不是问题

日历有 2 个链接，应该滚动浏览月份 - 典型的 next prev 链接。所以在我的加载函数里面我有这个

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

});

其中 a.month_change 是附加到 prev/next 链接的类。Ajax 帖子发送数据并返回 html。到目前为止，一切都很好。

第一次单击 a.month_change 它可以工作，但之后每次都不会加载页面。如果我尝试.live('click;,function ...第一次没有任何反应，也没有其他任何反应。

我总是对这些事情感到困惑，这是动态加载页面然后让 ajax 调用/链接等始终有效的正确方法。注意动态加载和ajax接收页面是同一个页面——plugins/calendar.html，JQ版本是jquery-1.9.0

4

9 回答 9

3

Live 自 1.7 起已弃用并在 1.9 中删除，您必须像这样使用它

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

});

如果你有一个更接近的，你应该使用最接近的静态元素而不是文档。

于 2013-02-28T09:11:57.803 回答
2

live()已折旧，您应该改用该on()功能。

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

});
于 2013-02-28T09:11:25.750 回答
1

这里的答案都没有有效地向您展示如何使用它，或者文档，所以你去吧。

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

我们定位的第一个元素是页面加载期间存在的静态元素，然后是我们希望捕获的事件，然后是应该绑定事件的元素。这是较新版本的 jQuery 中的事件委托。您不需要使用.live(), 或.bind().

这是 jQuery 的 .on() 的文档

于 2013-02-28T09:14:14.847 回答
0

由于其他答案都没有解决您提出的问题：

第一次单击 a.month_change 时它可以工作，但之后每次都没有加载页面

那么让我试着解释一下……

您的代码实际上是在进行两个 AJAX 调用，一个来自.load()，一个来自.ajax()

导致单击事件仅触发一次的问题是因为您要替换.ajax()调用成功处理程序中的日历 HTML，jQuery('#calendar .show_hide').html(msg);从而替换a.month_change您之前绑定单击处理程序的元素。

修复方法是将单击事件绑定移动到页面中未被任何 AJAX 调用替换的元素上。

例如在#calender元素上：

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

因此，您可以替换其中的所有内容，#calendar并且单击事件仍将被捕获，然后由静态祖先元素上的单击处理程序进行过滤。

正如其他答案所提到的，.live()在 v1.9 中已删除，您使用的是正确的.on()方法，但只是在错误的位置。

于 2013-02-28T09:23:06.697 回答
0

使用.on()，因为它也适用于动态添加DOM的 .

.live()已从新版本中弃用。

运行测试

尝试

<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>
于 2013-02-28T09:11:27.113 回答
0

我更喜欢并建议您使用on()..您可以查看这篇文章以了解有关on直接和委托方法的更多信息....

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

这将单击事件委托给始终为静态的文档。并找到将事件放在上面的选择器。但是，始终首选使用最接近的静态元素，因为文档性能不佳。

于 2013-02-28T09:16:14.987 回答
0

.click并且.bind在页面加载期间与当前存在于 DOM 中的 dom 元素绑定。

.live是一种用于为元素附加事件的方法，该事件可能稍后由 Ajax 或 Javascript 填充到 DOM 中。但是 .live 存在与性能相关的重大问题。

为了克服这一点$.delegate，在 DOM Hierarchy 中引入了更好的性能。

使用最新的 Jquery 1.7 或更高版本.on，用于将事件绑定到元素（运行时），只要元素将被填充到 DOM 中。它提高了性能然后 .live 您可以在此站点 http://api.jquery.com/live/上获得更多信息，这 将提供给 jQuery 事件绑定的现场

于 2013-02-28T09:17:48.683 回答
0

最好是使用 Jqueryon方法。.live() 已从新版本中弃用。

例如；

$('#yourElement').on('click',function(){});
于 2013-02-28T09:11:42.647 回答
0

尝试

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

通常以这种方式绑定解决了我对新 HTML 内容的问题

于 2013-02-28T09:12:36.290 回答