Question

我正在使用Ajax生成内容，因此需要使用.live()将函数附加到生成的链接上的click事件。不幸的是它似乎没有工作，我不知道为什么。我已经尝试将它放在domready上下文的内部和外部;没运气。它只是在我使用$('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代码弄乱了 head标记中的脚本。在正文标记中，点击绑定“返回错误”。这将停止进一步调用任何“点击”绑定。

我在你的代码中发现了三个问题。在纠正之后，我得到了警告框。

将您的代码包装在$(document).ready(function(){ });中，就像您在问题中一样（但它不在演示网站中）。
在正文标记中的relink: function() { - 注释“返回false; ”和

更正了分号中缺失的分号的 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调用后运行后续的“成功”函数。也许其中一个回调是运行调整大小功能的好地方？

jQuery live函数不是，运行良好

3 个答案: