Question

这可能听起来很“愚蠢”，但我有一个简单的日历加载到页面上，如下所示：

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

这不是问题

日历有2个链接，应该滚动月份 - 典型的下一个上一个链接。所以在我的加载函数中我有这个

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

Answer 1

直播自1.7以来已被弃用，并且在1.9中被删除，您必须像这样使用它

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

});

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

Answer 2

live()已弃用，您应该使用on()函数。

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

});

Answer 3

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

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()。

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

Answer 4

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

新版本不推荐使用

.live()。

Run Test

试

<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>

Answer 5

最好是使用Jquery on方法。 .live（）已从新版本弃用。

例如;

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

Answer 6

尝试

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

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

Answer 7

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

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

这会将click事件委托给始终是静态的文档..并找到将事件放在上面的选择器....但是，使用最接近的静态元素总是首选，因为文档不是很好的表现。

Answer 8

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

.live是一个用于附加元素事件的事件，后者可能会被Ajax或Javascript 填充在DOM中。但.live与效果相关的主要问题。

过度使用这个$.delegate，在DOM层次结构中引入更好的性能。

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

Answer 9

由于其他答案都没有解决你的观点：

第一次单击a.month_change时，它会起作用，但每次都有效之后页面未加载

然后让我试着解释......

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

点击事件仅触发一次的问题是由于您要使用.ajax()替换jQuery('#calendar .show_hide').html(msg);调用的成功处理程序中的日历的HTML，从而替换a.month_change元素你以前绑定了点击处理程序。

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

例如在#calender元素上：

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

因此，您可以替换#calendar内的所有内容，仍然会捕获点击事件，然后通过静态祖先元素上的点击处理程序进行过滤。

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

jQuery .live，click，bind等使用它

9 个答案: