Javascript jQuery live函数没有正常运行_Javascript_Jquery_Ajax

Javascript jQuery live函数没有正常运行

javascript jquery ajax

Javascript jQuery live函数没有正常运行,javascript,jquery,ajax,Javascript,Jquery,Ajax,我使用Ajax生成内容，因此需要使用.live将函数附加到生成的链接上的单击事件。不幸的是，它似乎不起作用，我也不知道为什么。我试着把它放在domready上下文的内部和外部；不走运。当我简单地使用$'a'时，它就工作了。单击，但在从Ajax提取的链接上不起作用。有什么想法吗 $(document).ready(function(){ $('#content a').live('click', function(){ var moveIt = $("#content").

我使用Ajax生成内容，因此需要使用.live将函数附加到生成的链接上的单击事件。不幸的是，它似乎不起作用，我也不知道为什么。我试着把它放在domready上下文的内部和外部；不走运。当我简单地使用$'a'时，它就工作了。单击，但在从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-->

你看了吗，代表？它的作用与.live几乎相同，但允许您指定额外的选择器来过滤任何触发的元素

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

不确定为什么您的特定示例不起作用，但如果您至少有jQuery 1.4.2，请尝试更新为.delegate。

是否查看了.delegate？它的作用与.live几乎相同，但允许您指定额外的选择器来过滤任何触发的元素

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

不确定为什么您的特定示例不起作用，但如果您至少有jQuery 1.4.2，请尝试更新为.delegate。

body标记内的JavaScript代码与head标记内的脚本弄乱了。在body标签中单击绑定返回false。这将停止进一步调用任何单击绑定

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

将代码包装在$document.readyfunction{}中；就像你在你的问题，但它不是在演示网站。在relink:function{in your body标记中-commented return false；以及更正了中缺少的分号 smd_ajax.spinit1

您可以使用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);
    });
});

body标记中的JavaScript代码与head标记中的脚本相混淆。在body标记中，单击绑定返回false。这将停止进一步调用任何单击绑定

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

将代码包装在$document.readyfunction{}；中，就像您在问题中所做的一样，但它不在演示站点中。在relink:function{in your body标记中-commented return false；以及更正了中缺少的分号 smd_ajax.spinit1

您可以使用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);
    });
});

我看了一下你的网站——我无法解释你的警报不起作用，但ajax实现似乎有点复杂。我认为你可以简化它，完全避免奇怪的委托/活动问题

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

我查看了您的站点-我可以我不能真正解释你的警报不起作用，但ajax实现似乎有点复杂。我认为你可以简化它，完全避免奇怪的委托/活动问题

@maniator我将更新问题把它放到JSFIDLE中，点击就可以了。什么不起作用？没有必要把你的.live调用放在$document.readyfunction{}中。请参阅：@justkt应该触发的事件都没有激活。它在您的小提琴中确实起作用，但我不知道为什么它在live site上不起作用。它不起作用是什么意思？@maniator我会用它更新问题。将它放入JSFIDLE中，并在单击时确定。什么不起作用？没有必要放入您的.live calls在$document.readyfunction{}中.See:@justkt应该触发的事件都没有激活。它在你的小提琴中确实起作用，但我不知道为什么它在直播网站上不起作用。它不起作用是什么意思？我看了一下。代表，但想看看我是否可以。直播工作。现在尝试一下……没有骰子。这是直播网站的链接；可能有其他一些jquery会影响它吗？你说不工作是什么意思？我可以点击一个图像，然后很好地返回。它还应该做些什么吗？最好使用。委派。如果可能的话，如果你不需要一直在DOM树上冒泡的话，就可以使用live。我应该提到我使用的是Firfox 3.6，所以你可能会遇到这样的问题一些奇怪的浏览器问题。问题不在功能上——单击“前进”和“后退”确实有效。应该发生的是应该有一个警报，让我知道内容的宽度，然后内容扩展以适应ajax拉入的数据的宽度。这是无法执行的。我查看了.delegate，但我想看看我

f我可以得到。生活和工作。现在就试试吧。。。没有骰子。这里有一个到现场的链接；也许还有其他jquery影响它？你不工作是什么意思？我可以点击一张图片，然后很好地返回。它还应该做些什么？如果不需要在DOM树上一直冒泡，最好使用.delegate over.live（如果可能的话）。我应该提到，我使用的是Firfox 3.6，所以可能您遇到了一些奇怪的浏览器问题。问题不在于功能——单击“前进”和“后退”可以工作。应该发生的是，应该有一个警报，让我知道内容的宽度，然后扩展内容以适应ajax拉入的数据的宽度。这就是我不能执行的。我可以吻你，先生！这很有效。我将不得不向一位先生提及这个解决方案，这位先生创建了我用于Ajax的插件，以查看您的修复是否与脚本中的其他内容冲突，尽管到目前为止它似乎进展得非常顺利。万分感谢我可以吻你，先生！这很有效。我将不得不向一位先生提及这个解决方案，这位先生创建了我用于Ajax的插件，以查看您的修复是否与脚本中的其他内容冲突，尽管到目前为止它似乎进展得非常顺利。万分感谢ajax是复杂的，因为它是通过我正在使用的CMS插件实现的——我对jquery的了解还不到新手水平，而我对ajax的了解还不到新手水平，所以插件对我来说更容易理解。将调整大小的函数包装到成功回调中并不是一个坏主意；但是，如果它涉及if/else，它可能会对我的技能水平来说有点太复杂。ajax是复杂的，因为它是通过我正在使用的CMS的插件实现的-我对jquery的了解仅仅是新手水平，而我对ajax的了解比这要低，所以插件对我来说更容易理解。将调整大小的函数包装到成功回调中并不是一个坏主意；但是，如果它涉及if/else，它可能会对我的技能水平来说过于复杂。