Ajax更新设置html使javascript函数停止工作

Question

我有一个问题，我不知道发生了什么。 我有一个带有 javascript 的单击事件的元素列表。当页面启动时，click 事件效果很好，但是当我单击“更多”按钮时，它会调用 ajax 来加载其余元素并将它们放置在 ('#new-con').html(数据); 点击功能停止工作。

这是页面在开始时的样子：

当我单击更多按钮时，它会进行 ajax 调用并显示整个元素列表

加载其余产品的 javascript 代码（“更多”链接）是：

$(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>');
            }
        });
    });
});

显示弹出窗口（即停止工作的窗口）的代码是：

$(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;

    }
});

我检查了元素的类是否相同，它们是否相同。我不知道 ajax 调用后 javascript 代码是否停止工作。

提前感谢您的帮助。

编辑我使用的是 jQuery 1.4 并回答了我自己的问题。

Answer 1

使用on 方法。

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

Answer 2

好吧，您没有发布您的 HTML，但是只要您将 return false; 添加到您的点击处理程序的末尾，您的问题就会消失 10 美元。

像这样：

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

您也可以在开始时这样做：

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

也可以在 popup-link 上执行此操作，除非它打开带有 href 的页面。

这只有在 .more-link / .popup-link 是实际的 <a href=""> 链接而不是 <button class="more-link"> 之类的链接时才会有所帮助

Answer 3

最后我不得不将行改为

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

因为我使用的是 jQuery 1.4。 jQuery 文档指出了这一点：

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