Question

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({'maxWidth': '+=' + 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-->

Answer 1

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