分页 ul 有时没有点击答案

【问题标题】：pagination ul not getting click some times分页 ul 有时没有点击
【发布时间】：2017-01-30 19:33:09
【问题描述】：

function paginate_table(row,paginate_div_id, perpage) {
    var items = row;
    var numItems = items.length;
    var perPage = perpage;
    items.slice(perPage).hide();
    $('#' + paginate_div_id + '').pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "compact-theme",
        onPageClick: function (pageNumber) {
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;
            items.hide()
                    .slice(showFrom, showTo).show();
        }
    });
}
paginate_table($('.dynamicrow'),"searchresult", 10);
$(document).on('click', '#searchresult ul li', function(e) {
console.log(e.target)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row dynamicrow">qwe</div>

<div id="searchresult" class="compact-theme simple-pagination">
  <ul>
    <li><a href="#page-1" class="page-link dontprint prev">Prev</a>
    </li>
    <li><a href="#page-1" class="page-link dontprint">1</a>
    </li>
    <li class="active"><span class="current dontprint">2</span>
    </li>
    <li class="active"><span class="current dontprint next">Next</span>
    </li>
  </ul>
</div>

我正在使用simplePagination 的分页，就像上面我添加的方式如下所示。

function paginate_table(row,paginate_div_id, perpage) {
    var items = row;
    var numItems = items.length;
    var perPage = perpage;
    items.slice(perPage).hide();
    $('#' + paginate_div_id + '').pagination({
        items: numItems,
        itemsOnPage: perPage,
        cssStyle: "compact-theme",
        onPageClick: function (pageNumber) {
            var showFrom = perPage * (pageNumber - 1);
            var showTo = showFrom + perPage;
            items.hide()
                    .slice(showFrom, showTo).show();
        }
    });
}

添加分页工作正常。问题在于单击 UL 页数和下一个和上一个按钮。有时它起作用，有时它起作用。

我认为这是因为点击事件中的选择器。

定位跨度和锚点的正确方法是什么，这样无论是哪一次点击，它们都会触发点击事件

我必须单击它两次才能使其运行。像它一样的点击事件必须是一个跨度才能使其在锚上工作而不是

Update

$("#searchresult").on('click','ul li a,span ',function(e){
//        e.preventDefault();
        console.log(e.target)
})

当我点击锚点时使用了这个，如果我点击这样的跨度控制台，它不会在控制台上打印任何内容。

<span class="current dontprint next">Next</span>

【问题讨论】：

我必须单击它两次才能使其运行。点击事件\
您是否尝试过阻止默认锚行为？
不等我试试
相同的结果，我需要点击两次才能使其跨越，这样它才能工作
您是如何阻止默认操作的？你能用代码更新问题吗？

标签： jquery pagination

【解决方案1】：

使用.preventDefault() 阻止默认行为：

$(document).on('click', '#searchresult ul li a', function(e) {
  e.preventDefault();
});

【讨论】：

【解决方案2】：

尝试简单的点击事件 -

$('#searchresult ul li').click(function() {
  //your function
});

如果您从 ajax 加载 #searchresult 内容，您可以在下面尝试 -

$('body').on('click', '#searchresult ul li', function() {
  //your function
});

【讨论】：