jQuery live功能不是，运行良好

Question

我使用Ajax生成内容，因此需要使用.live()将函数附加到生成的链接上的click事件。它似乎不工作，不幸的是，我不知道为什么。我试着把它放在准备好的环境里面和外面;没有运气。当我仅仅使用$('a').click()时，它正在工作，但对于从Ajax中取出的链接无效。有什么想法吗？

$(document).ready(function(){ 
    $('#content a').live('click', function(){ 
     var moveIt = $("#content").outerWidth(); 
     alert(moveIt); 
     $('#content').animate({'maxWidth': '+=' + moveIt/2 + 'px', 'left': '6%'}, 'slow'); 
    }); 

    $('a.back').live('click',function(){ 
     $('#content').animate({'maxWidth': '360px', 'left' : '43%'}, 400); 
    }); 
}); 

而这里的HTML：

<section id="content" class="textiles"><!--content start--> 
<div id="ajax-container"> 
    <div id="ajax-content"><!--test--> 
     <h1>Installations</h1> 
     <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/light-fixtures" title="light&nbsp;fixtures"><img src="http://www.qp2creative.com/clients/dfrank/images/51t.jpg" alt="Seating Area with Light Fixtures" height="64" width="140"></a> 
     <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/scad-fibers-installation" title="SCAD fibers&nbsp;installation"><img src="http://www.qp2creative.com/clients/dfrank/images/49t.jpg" alt="Installation in Context" height="64" width="140"></a> 
     <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/other-gallery" title="fashion 2008&nbsp;photoshoot"><img src="http://www.qp2creative.com/clients/dfrank/images/47t.jpg" alt="fashion's backdrop" height="64" width="140"></a> 
     <a rel="bookmark" href="http://www.qp2creative.com/clients/dfrank/installations/qp2-creative-gallery" title="QP2 Creative&nbsp;Gallery"><img src="http://www.qp2creative.com/clients/dfrank/images/41t.jpg" alt="QP2 Creative gallery" title=""></a> 
     </div> 
    </div><!--end ajax container--> 
</section><!--end content--> 

Answer 1

body标签内的JavaScript代码搞乱了头标签中的脚本。在您的正文标签 a 点击约束“返回假”。并停止进一步调用任何“单击”绑定。

我在代码中发现了三个问题。纠正它后，我得到了警报框。

1. 将代码封装在$(document).ready(function(){ });中，就像您在您的问题中一样（但它不在演示网站中）。
2. 在你body标签的relink: function() { - 评论说： “返回false;” 和

3. 纠正分号 smd_ajax.spinit（1）丢失;

   if ((site_url.indexOf(url.host) >= 0) && (bindit == true)) { 
       smd_ajax.spinit(1); //HERE 3rd Edit. 
       jQuery(this).unbind(); 
       smd_ajax.grab(this.href); 
       //return false; //HERE 2nd Edit. 
   } 
   

您可以使用preventDefault();停止默认行为。

$(document).ready(function(){ 
    $('#content a').live('click', function(e){ 
     var moveIt = $("#content").outerWidth(); 
     alert(moveIt); 
     $('#content').animate({'maxWidth': '+=' + moveIt/2 + 'px', 'left': '6%'}, 'slow'); 
     e.preventDefault(); //Hyperlink won't load page link. 
    }); 
    $('a.back').live('click',function(){ 
     $('#content').animate({'maxWidth': '360px', 'left' : '43%'}, 400); 
    }); 
}); 

Answer 2

你已经采取了看看.delegate()？它几乎与.live()一样，但允许您指定一个额外的选择器来过滤任何触发的元素。

$('#content').delegate('a', 'click', function() { 
    // code here 
} 

不知道为什么你的具体的例子不工作，但如果你有至少jQuery的1.4.2，尝试更新到.delegate()。

Answer 3

我看了一下你的网站 - 我真的不能解释您的警报不工作，但似乎Ajax实现是一个有点令人费解。我想你可能会简化它，并完全避免怪异的委托/现场问题。

您是否考虑过使用简单的jQuery.ajax或jQuery.load函数来更改动态内容？我知道这些函数有回调函数，可以让你在ajax调用完成后运行后续的“成功”函数。也许其中一个回调将是一个运行调整大小功能的好地方？