jQuery live function is not, well, functioning

I'm generating content using Ajax and therefore need to use .live() to attach a function to the click event on links generated. It doesn't seem to be working unfortunately, and I'm not sure why. I've tried putting it both inside and outside of the domready context; no luck. It was working when I was simply using $('a').click(), but that didn't work on the links pulled from Ajax. Any thoughts?

$(document).ready(function(){
    $('#content a').live('click', function(){
        var moveIt = $("#content").outerWidth();
        alert(moveIt);
        $('#content').animate({'maxWidt开发者_C百科h': '+=' + moveIt / 2 + 'px', 'left': '6%'}, 'slow');
    });

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

And here's the 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-->

Your JavaScript code inside the body tag is messing up with the script inside the head tag. In your body tag a click binding "return false". and this stops calling any "click" bindings further.

I found three problems in your code. After correcting it I got the alert box.

1. wrapped your code inside $(document).ready(function(){ }); just like you have in your question (but it's not in the demo site).
2. on the relink: function() { in your body tag - commented "return false;" and

3. corrected the semicolon missing in 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.
   }
   

You can use preventDefault(); to stop the default behaviour.

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

Have you taken a look at .delegate()? It does nearly the same thing as .live() but allows you to specify an additional selector to filter any triggered elements.

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

Not sure why your particular example isn't working, but if you have at least jQuery 1.4.2, try updating to .delegate().

I took a look at your site - I can't really explain your alert not working, but it seems the ajax implementation is a bit convoluted. I think you might be able to simplify it and avoid the weird delegate/live problem altogether.

Have you considered using a simple jQuery.ajax or jQuery.load function to change your dynamic content? I know those functions have callbacks that let you run subsequent "success" functions after your ajax call is completed. Perhaps one of those callbacks would be a good place to run your resizing function?