Link stops working after ajax reload of parent container

On my page (LINK) I wanted to add ajax paginated list of previously added videos. The list works fine until I go to the next page. Then the whole thing stops reacting even though I'm using livequery. Even introducing a parent div to updated one didn't solve the problem. Any ideas what's - happening ?

Parent container :

    <div id="videos-wrapper">
        <div class="videos-list">
            <h3>Previous Videos</h3>
            DATA  GOES HERE
        </div>
    </div>

updated html:

<ul id="videos-{{ page }}">
    {% for obj in objects %}
        <li>
            <a href="#" class="{{ obj.id }}">
                <img src="{{obj.video.thumbnail_url}}" alt="{{ obj.video.title }}" />
            </a>
        </li>
    {% endfor %}
</ul>

{% if prev %}
    <a href="#" class="vid-navi">
        <span class="{{ prev }}">pre开发者_运维知识库v</span>
    </a>
{% endif %}    

{% if next %}
    <a href="#" class="vid-navi">   
        <span class="{{ next }}">next</span>  
    </a>
{% endif %}

js:

$('#videos-wrapper .vid-navi').livequery('click', function(e) {
    e.preventDefault();
    var page = $("span", this).attr('class');

    alert("GO");

    $.ajax({
        type: "POST",
        url: "/play-forward/change-page",
        data: "page=" + page,
        dataType: "json",
        success: function(data){
            $('.videos-list').html(data['html']);
        }
    });
    return false;
});

---

I use jQuery's native live() to do this all the time. Looks like a simple swap for what you've got here.

http://api.jquery.com/live/