JQuery undefined return effect

Question

I have the following block:

$('.new_comment').live('ajax:success', function(evt, data, status, xhr){ $('.comments article:last').after(xhr.responseText).effect("highlight", {}, 3000); }) 

So, when the new_comment form new_comment submitted, it calls it.

The after() function works fine, but calling effect() causes this error:

 TypeError: 'undefined' is not a function (evaluating '$('.comments article:last').after(xhr.responseText).effect("highlight", {}, 3000)') 

I am using jQuery 1.7.1 and jQuery UI 1.8.16.

UPDATE: xhr.responseText returns the newly created article element, for example:

 <article id="2"> <h6><a href="#">Joe</a> <span>(<a href="#2">less than a minute ago</a>)</span></h6> <p>This is the new comment!</p> </article> 

After adding the DOM .comments looks like this:

 <section class="comments"> <h3>Comments</h3> <article id="1"> <h6><a href="#">Joe</a> <span>(<a href="#1">less than a minute ago</a>)</span></h6> <p>This is a comment!</p> </article> <article id="2"> <h6><a href="#">Joe</a> <span>(<a href="#2">less than a minute ago</a>)</span></h6> <p>This is the new comment!</p> </article> </section> 

Also, if I ran console.log($('.comments article:last')); , it will definitely return the created object.

Answer 1

I understood the problem. I downloaded the jQuery library twice. After using the pre-packaged version with Rails and once from Google CDN. One of them has been deleted, and now everything is working fine. Sigh.

Answer 2

A new element created by an ajax message is not bound to the parent container. It looks like a new namespace is being created by publishing. Thus, you cannot touch any element of the page body that is not defined in the resulting part of the post function.