Question

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页数和next和prev按钮。有时候它确实有效。

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

以span和anchor为目标的正确方法是什么，这样无论点击什么，他们都会触发点击事件

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

Update

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

当我点击锚时使用这个，如果我点击这样的控制台，它就不会在控制台上打印。

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

Answer 1

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

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

Answer 2

尝试使用简单的点击事件 -

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

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

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

分页有时不会点击

2 个答案: