第一次点击<a href="xxx">无反应，点击第二次才跳转是什么原因呢

Question

<script>
    var data ={/json_encode($mapdata)/} ||"";
    var $findFilterData = $("#find-filter-data");

    $findFilterData.on({
        keyup: function (e) {
            fnFindFilterData(e);
        },
        blur: function (e) {
            fnFindFilterData(e);
        }
    });
    
    // 根据当前页数分割数据并渲染
    // data:全部数据, currentPage:当前所在页数
    function sliceDataByPage(data, currentPage) {
        data = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
        return data;
    }

    //生成即时过滤数据对应的HTML片段
    function renderFilterHtml(data) {
        if (data && data.length > 0) {
            var listHtml = "";
            for (var i = 0; i < data.length; i++) {
                var index = i + 1, liHtml = "<tr>";
                var viewurl="/tool/MapData?type=view&mapkey="+data[i].map_key;
                var editurl="/tool/MapData?type=edit&mapkey="+data[i].map_key;
                liHtml += "<td>" + index + "</td><td>" + data[i].map_name + "</td><td>" + data[i].map_key + "</td><td>" + data[i].creater + "</td><td>" + data[i].updater + "</td><td><a  href='"+viewurl+"' class='btn btn-default btn-sm button-oprtation'>查看</a><a href='"+editurl+"' class='btn btn-default btn-sm button-oprtation'>编辑</a></td>"
                liHtml += "</tr>";
                listHtml += liHtml;
            }
        } else {
            listHtml = "<tr><td colspan='6' style='text-align: center'>没有数据</td></tr>";
        }
        $(".table-list").find(".item-list").html(listHtml);
    }

    // 根据输入的mapkey查询数据
    function fnFindFilterData(e) {
        var inf = $(e.target).val() || "";
        var totalPageNumFind = 1, currentPageFind = 1; // 查询结果的总页数,当前在查询结果的第几页
        var resultInf = [], resultInfHandle = []; // 查询结果
        $(".pagination").html("");
        if (inf && inf.length > 0) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].map_key.indexOf(inf) > -1) {
                    resultInf.push(data[i]);
                }
            }
        }
        totalPageNumFind = Math.ceil(resultInf.length / pageSize) || 1; // 总页数
        if (totalPageNumFind > 1) {
            resultInfHandle = sliceDataByPage(resultInf, currentPageFind);
            publicOperation(resultInf, currentPageFind, totalPageNumFind, resultInfHandle);
        } else {
            renderFilterHtml(resultInf);
            bindEventHandle(resultInf, totalPageNumFind);
        }
    }

    function bindEventHandle(resultInf, totalPageNumFind) {
        $(".page-num-first").on('click', function () {
            var currentPage = 1;
            var resultInfHandle = sliceDataByPage(resultInf, currentPage);
            publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle);
        });
        $(".page-num-last").on('click', function () {
            var currentPage = totalPageNumFind;
            var resultInfHandle = sliceDataByPage(resultInf, currentPage);
            publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle);
        });
        $(".page-num-prev").on('click', function () {
            var currentPage = parseInt($("#currentNumSelected").text()) || 1;
            currentPage = currentPage - 1;
            if (currentPage < 1) {
                currentPage = 1;
            }
            var resultInfHandle = sliceDataByPage(resultInf, currentPage);
            publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle);
        });
        $(".page-num-next").on('click', function () {
            var currentPage = parseInt($("#currentNumSelected").text()) || 1;
            currentPage = currentPage + 1;
            if (currentPage > totalPageNumFind) {
                currentPage = totalPageNumFind
            }
            var resultInfHandle = sliceDataByPage(resultInf, currentPage);
            publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle);
        });

        $(".page-num").on('click', function (event) {
            var currentPage = parseInt($(event.target).text()) || 1;
            var resultInfHandle = sliceDataByPage(resultInf, currentPage);
            publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle);
        })
    }

    function publicOperation(resultInf, currentPage, totalPageNumFind, resultInfHandle) {
        renderPaginationWithFind(currentPage, totalPageNumFind);
        renderFilterHtml(resultInfHandle);
        bindEventHandle(resultInf, totalPageNumFind);
    }

    // 对搜索结果内容进行分页,和普通的分页略有不同。之后会将两者合二为一
    function renderPaginationWithFind(currentPage, totalNum) {
        var currentPage = currentPage || 1, totalNum = totalNum, ulHtml = "", currentPageSelected;
        $(".pagination").html(ulHtml);
        ulHtml += '<li><a class="first-page page-num-first">第一页</a></li><li><a class="prev-page page-num-prev">上一页</a></li>';
        for (var i = 0; i < totalNum; i++) {
            var currentNum = i + 1;
            if (currentPage == currentNum) {
                currentPageSelected = "current-page-selected";
            } else {
                currentPageSelected = "";
            }
            ulHtml += '<li><a class="page-num" id="' + currentPageSelected + '">' + currentNum + '</a></li>';
        }
        ulHtml += '<li><a class="next-page page-num-next">下一页</a></li><li><a class="last-page page-num-last">最后一页</a></li>';
        $(".pagination").html(ulHtml);
        if (currentPage == 1) {
            $(".page-num-prev").addClass("btn-not-allowed");
            $(".page-num-first").addClass("btn-not-allowed");
        }
        if (currentPage == totalNum) {
            $(".page-num-next").addClass("btn-not-allowed");
            $(".page-num-last").addClass("btn-not-allowed");
        }
    }
</script>

由于字数限制，只贴了最重要的部分，根据搜索框的内容查询并渲染html，第一次点击<a href="xxxx.html>查看</a> 或<a href="xxx.html">编辑</a> 页面不跳转 ,只要在搜索框输入完毕，并点击页面任意地方，再点击a标签，页面才跳转，

这是为什么呢？

有试着对a添加click，第一次点击，不执行，点击第二次，根据输出显示已经是执行第二次了，同样在在搜索框输入完毕，并点击页面任意地方，再点击a标签就能跳转。

最后，当注释掉以下代码后，就一切正常了 ，

blur: function (e) {
    fnFindFilterData(e);
}

Answer 1

因为blur是失焦事件，所以先失去焦点，再点击就正常了。