Ajax update setting html makes javascript function stop working

Question

I have a problem and i don't know what's going on. I have a list of elements whit a click event with javascript. The click event works great when the page starts, but when i click the 'more' button, which makes an ajax call to load the rest of elements and place them with ('#new-con').html(data); the click function stops working.

This is how the page looks at start:

And when i click the more button it makes an ajax call and shows the whole list of elements

the javascript code to load the rest of products ("more" link) is:

$(document).ready(function(){
    $('.more-link').click(function(event){
        var type= $(this).attr('type');
        $.ajax({
            url: 'panels/index_more_link?type='+type,

            type: 'GET',
            beforeSend: function(){
                $('#more-link-'+type).html('<%= spinner_image("content_ps").sub("style=\"display:none;\"", "").html_safe %>');
            },
            success: function(data){
                $('#new-'+type).html(data);
            },
            error: function(data){
                $('#more-link-'+type).html('<div style="text-align: center; color: #000000; font-size: 50px">404 not found</div>');
            }
        });
    });
});

And the code to show a pop-up (which is the one that stops working) is:

$(document).ready(function(){
    $('.popup-link').click(function(event){
        var clase = $(this).attr('class');
        if(clase=='nopopup-link'){
            return;
        }
        var isLink = $(this).attr('id') != 'popup-nextbutton' && $(this).attr('id') != 'popup-backbutton';
        if(isLink){
            var type=$(this).attr('type-ps');
            var id=$(this).attr('id-ps');

            $('#popup-hiddenfield').text(type + '---' + id);
            $('#dialog-ps').show();
        }

        var idobj = $(this).attr('id');
        var type = getCategoryOrType($('#popup-hiddenfield').text(), 0);
        var id= getCategoryOrType($('#popup-hiddenfield').text(), 1);
        $('#popup-connectorname').text(type);
        $('#popup-moredetails').text(type + ' details...');

        var links = new Array();
        var cookieLinks = $.cookie(type.split(" ").join("_") + "_Product").replace("[","").replace("]","");

        links.push(JSON.parse("["+cookieLinks+"]"));
        links = links[0];
        var centeredTop = getCenteredTop($('.popupbox').height());
        centeredTop = centeredTop < 0 ? 0 : centeredTop;
        $('.popupbox').css('top', Math.round(centeredTop)+'%');
        $('.popupx').css('top', Math.round(centeredTop)+'%');
        var position = links.indexOf(parseInt(id),links);
        if(!isLink){
            if ($(this).attr('id') == 'popup-backbutton'){
                id = links[position-1];
            }else{
                id = links[position+1]
            }
        }
        position = links.indexOf(parseInt(id),links);
        if(position==0){
            $('#popup-backbutton').attr('class','nopopup-link');
            $('#popup-backbutton').css('cursor', 'auto');
            $('#popup-backbutton').html('&nbsp;');
            $('#popup-nextbutton').attr('class','popup-link');
            $('#popup-nextbutton').css('cursor', 'pointer');
            $('#popup-nextbutton').html('>');

        }else if((position)==links.length-1){
            $('#popup-backbutton').attr('class','popup-link');
            $('#popup-backbutton').css('cursor', 'pointer');
            $('#popup-backbutton').html('<');
            $('#popup-nextbutton').attr('class','nopopup-link');
            $('#popup-nextbutton').css('cursor', 'auto');
            $('#popup-nextbutton').html('&nbsp;');
        }else{
            $('#popup-backbutton').attr('class','popup-link');
            $('#popup-backbutton').css('cursor', 'pointer');
            $('#popup-backbutton').html('<');
            $('#popup-nextbutton').attr('class','popup-link');
            $('#popup-nextbutton').css('cursor', 'pointer');
            $('#popup-nextbutton').html('>');
        }
        var urlLink = (type == 'Connectors' ? '/connectors' : (type=='Flat Sheet'? '/flat_sheets' : '/panels')) + '&urlMid' + id;
        $('#popup-moredetails').attr('href', urlLink.replace('&urlMid','/'));
        console.info(urlLink.replace('&urlMid','/product_specifications?id='));
        $.ajax({
            url: urlLink.replace('&urlMid','/product_specifications?id='),

            type: 'GET',
            beforeSend: function(){

                $('#content-ps').html('<%= spinner_image("content_ps").sub("style=\"display:none;\"", "").html_safe %>');
            },
            success: function(data){
                $('#popup-hiddenfield').text(type + '---' + id);
                $('#content-ps').html(data);
                succesful = true;
            },
            error: function(data){
                $('#popup-hiddenfield').text(type + '---' + id);
                $('#content-ps').html('<div style="text-align: center; color: #000000; font-size: 50px">404 not found</div>');
            },
            statusCode: function(data){
                $('#popup-hiddenfield').text(type + '---' + id);
                $('#content-ps').html(data);
            }
        });

    });

    function getCategoryOrType(content, what){
    <%#
        what:
           0-category
           1-type
    %>
        return content.split("---")[what];
    }

    function getCenteredTop(popupHeight){
        if(popupHeight == 0){
            return 0;
        }
        var sHeight= $(window).height();
        var topPixels = 0;
        var topPixels = (sHeight-popupHeight)/2;
        var topPercent = (topPixels * 100)/sHeight;
        return topPercent;

    }
});

I have checked if the class of the elements is the same and they are. I don't know if the javascript code stops working after ajax calls.

Thanks in advance for your help.

EDIT I was using jQuery 1.4 and answered my own question.

Answer 1

At the end i had to change the line to

('.popup-link').live('click', function(event){

because im using jQuery 1.4. jQuery documentation points it:

jQuery 1.3+

$( "a.offsite" ).live( "click", function() {
  alert( "Goodbye!" );
});

jQuery 1.4.3+

$( document ).delegate( "a.offsite", "click", function() {
  alert( "Goodbye!" );
});

jQuery 1.7+

$( document ).on( "click", "a.offsite", function() {
  alert( "Goodbye!" );
});

Answer 2

Well you didn't post your HTML but ten bucks says your problems go away once you add return false; to the end of your click handler.

Like this:

$('.more-link').click(function(event){
    .....
    .....bottom......
    return false;
});

Alternatively you can do this at the beginning instead:

$('.more-link').click(function(event){
    var e = event || window.event;
    e.preventDefault();
.....AJAX STUFF.....
});

Do this on the popup-link too unless it opens a page with href.

This is only gonna help if .more-link / .popup-link are actual <a href=""> links and not something like <button class="more-link">

Answer 3

Use on method.

$(document.body).on('click', '.popup-link' ,function(){