Question

我有一个问题，我不知道发生了什么。我有一个使用javascript点击事件的元素列表。点击事件在页面启动时效果很好，但是当我点击“更多”按钮时，会调用ajax来加载其余元素并将其放置（ '＃新-CON'）的html（数据）。点击功能停止工作。

这是页面开始时的样子：

enter image description here

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

enter image description here

加载其余产品的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;

    }
});

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

提前感谢您的帮助。

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

Answer 1

使用on方法。

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

Answer 2

嗯，你没有发布你的HTML，但是10美元一旦你将return false;添加到点击处理程序的末尾就表示你的问题就消失了。

像这样：

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

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

3 个答案: