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:

enter image description here

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

enter image description here

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.

Khawer Zeshan · Accepted Answer · 2014-01-03 00:01:24Z

3

Use on method.

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

answered Jan 3, 2014 at 0:01

Khawer Zeshan

9,6568 gold badges43 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JGutierrezC Over a year ago

I've put it that way and click event is fired with every click everywhere. pastebin.com/VBTqD2Zv am i missing something?

Bruno De Freitas Barros Over a year ago

Here is an explanation of this cenario: blog.codebusters.pl/en/…

Deryck · Accepted Answer · 2014-01-03 00:09:49Z

0

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">

answered Jan 3, 2014 at 0:09

Deryck

7,6662 gold badges27 silver badges44 bronze badges

1 Comment

Deryck Over a year ago

It's cool I just threw out what I could without knowin the HTML. Just gave it my best shot lol

JGutierrezC · Accepted Answer · 2014-01-06 14:58:42Z

0

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

answered Jan 6, 2014 at 14:58

JGutierrezC

4,5725 gold badges28 silver badges42 bronze badges

Collectives™ on Stack Overflow

Ajax update setting html makes javascript function stop working

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related