鍍金池/ 問答/HTML/ 為什么點擊頁碼后列表的a標(biāo)簽就無法跳轉(zhuǎn)了?

為什么點擊頁碼后列表的a標(biāo)簽就無法跳轉(zhuǎn)了?

圖片描述

如圖,
列表最右側(cè)的數(shù)字1是一個a鏈接,點擊可以跳轉(zhuǎn)到新頁面。
在頁碼第一頁時可以正常跳轉(zhuǎn)。
當(dāng)我點擊到第二頁時,列表的a鏈接便無法跳轉(zhuǎn)。再回到第一頁鏈接也無法跳轉(zhuǎn)了。
也就是說只要點擊頁碼后,列表里的a鏈接便無法跳轉(zhuǎn)了。

分頁用的是laypage,a鏈接換成button也是同樣的問題。

請問這是什么原因?

function getInfo(page) {

    $.ajax({
        type: 'post',
        url: '/web/illegalMessages',
        //dataType:'json',
        data: {
            'page': page
        },
        async: false,
        success: function(data) {

            //var data = JSON.parse(data);
            var list = data.data;
            totalRow = data.totalRow; //獲取總條數(shù)

            if (data.flag == 'success') {

                $('tbody').html(''); //先清空,否則再次查詢會在本頁累加數(shù)據(jù)

                for (var i = 0; i < list.length; i++) {
                    var num=i+(page-1)*10
                    $('tbody').append(
                        '<tr id="' + list[i].illegalmessageid + '">' +
                        '<td>' + num + '</td>' +
                        '<td>' + list[i].occurarea + '</td>' +
                        '<td>' + list[i].platenumber + '</td>' +
                        '<td>' + list[i].occurtime + '</td>' +
                        '<td>' + list[i].markImgPath + '</td>' +
                        '<td>' + list[i].detailImgPath + '</td>' +
                        '<td>' + list[i].voicePath + list[i].videoPath + '</td>' +
                        '<td>'+
                        '<a href="javascript:;">'+
                         list[i].deal + 
                         '</a>'+
                         '</td>' +
                        '</tr>'
                    )
                }
            }


            //配置并加載所需模塊
            layui.config({
                base: 'base/lay/modules/'
            }).use(['laypage', 'table'], function() {
                var laypage = layui.laypage;
                var table = layui.table;

                //實例化分頁
                laypage.render({
                    elem: 'layPage' //分頁容器的id
                        ,
                    layout: ['prev', 'page', 'next', 'limits', 'count'] //排版
                        ,
                    limit: 10 //每頁顯示數(shù)
                        ,
                    count: totalRow //總條數(shù)
                        ,
                    curr: page //當(dāng)前頁
                        ,
                    groups: 3 //連續(xù)出現(xiàn)的頁數(shù)
                        ,
                    theme: '#1E9FFF' //自定義選中色值
                        ,
                    skip: true //開啟跳頁
                        ,
                    jump: function(obj, first) { //點擊頁碼跳頁
                        if (!first) {
                            $('tbody').html('');
                            getInfo(obj.curr); //查詢,傳參:當(dāng)前頁
                        }
                    }
                });
            });

        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);
        },
    })
}


$(function() {

 //存儲id到會話并且跳轉(zhuǎn)頁面
    $('tbody a').unbind('click').on('click',function(){

        var id=$(this).parents('tr').attr("id");

        sessionStorage.setItem('id',id);

        $(this).attr("href","../Illegal_honking/Illegal_honking.html");

    })

})
回答
編輯回答
獨白

你這個寫法還有問題,影響性能。

function getInfo(page) {

$.ajax({
    type: 'post',
    url: '/web/illegalMessages',
    //dataType:'json',
    data: {
        'page': page
    },
    async: false,
    success: function(data) {

        //var data = JSON.parse(data);
        var list = data.data;
        totalRow = data.totalRow; //獲取總條數(shù)

        if (data.flag == 'success') {

            $('tbody').html(''); //先清空,否則再次查詢會在本頁累加數(shù)據(jù)
            var _html = "";
            for (var i = 0; i < list.length; i++) {
                var num=i+(page-1)*10
                _html += '<tr id="' + list[i].illegalmessageid + '">' +
                    '<td>' + num + '</td>' +
                    '<td>' + list[i].occurarea + '</td>' +
                    '<td>' + list[i].platenumber + '</td>' +
                    '<td>' + list[i].occurtime + '</td>' +
                    '<td>' + list[i].markImgPath + '</td>' +
                    '<td>' + list[i].detailImgPath + '</td>' +
                    '<td>' + list[i].voicePath + list[i].videoPath + '</td>' +
                    '<td>'+
                    '<a href="javascript:;">'+
                     list[i].deal + 
                     '</a>'+
                     '</td>' +
                    '</tr>'
            }
            $('tbody').append(_html);
        }


        //配置并加載所需模塊
        layui.config({
            base: 'base/lay/modules/'
        }).use(['laypage', 'table'], function() {
            var laypage = layui.laypage;
            var table = layui.table;

            //實例化分頁
            laypage.render({
                elem: 'layPage' //分頁容器的id
                    ,
                layout: ['prev', 'page', 'next', 'limits', 'count'] //排版
                    ,
                limit: 10 //每頁顯示數(shù)
                    ,
                count: totalRow //總條數(shù)
                    ,
                curr: page //當(dāng)前頁
                    ,
                groups: 3 //連續(xù)出現(xiàn)的頁數(shù)
                    ,
                theme: '#1E9FFF' //自定義選中色值
                    ,
                skip: true //開啟跳頁
                    ,
                jump: function(obj, first) { //點擊頁碼跳頁
                    if (!first) {
                        $('tbody').html('');
                        getInfo(obj.curr); //查詢,傳參:當(dāng)前頁
                    }
                }
            });
        });

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        console.log(XMLHttpRequest.status);
        console.log(XMLHttpRequest.readyState);
        console.log(textStatus);
    },
})

}

$(function() {

//存儲id到會話并且跳轉(zhuǎn)頁面

$('tbody a').unbind('click').on('click',function(){

    var id=$(this).parents('tr').attr("id");

    sessionStorage.setItem('id',id);

    $(this).attr("href","../Illegal_honking/Illegal_honking.html");

})

})

2017年12月13日 00:50
編輯回答
近義詞

不上代碼,你給我們說天書呢?
1.首屏沒問題,分頁是異步加載嗎?
2.加載完還是a標(biāo)簽嗎?
2.如果是a標(biāo)簽,href還在嗎?
3.如果href在,是正確的href嗎?
4.信息太少了


修改

在你異步完的ajax里拼接a標(biāo)簽的時候

<a href="javascript:;">

寫死了。
正常的邏輯應(yīng)該是拿到后臺傳過來的地址拼上去,或者有一定的規(guī)則自己拼接。

2017年12月30日 20:19
編輯回答
尤禮

事件失效了。
方案1:需要重新綁定點擊事件。
dom繪制后,a標(biāo)簽已經(jīng)不是之前被選擇的了,重新綁定即可解決。
方案2:使用document事件代理

$(function() {
    $(document).on('click', 'tbody a', function(){
        // some code...
    });
});
2018年5月14日 17:24
編輯回答
蝶戀花

無代碼,無真相啊
不過,你可以監(jiān)看一下是否有什么報錯信息

2017年2月16日 02:30