jquery - Javascript - 创建 html 元素后，它们是不可点击的

Question

我在弹出模式分页脚本中创建，结果是从 api url 获取的。第一次打开对话框时，您会得到前 10 个结果，并带有分页。如果您浏览分页 1、2、3、next、prev，一切都很好。问题是按名称输入字段搜索。当我使用搜索时，我发送了一个新请求，并得到了新结果，因此我删除了“旧”分页，将其替换为新的总页数结果。它会创建正确的数字，但点击事件不再起作用。所以没有 prev, next, 1, 2, 3...所以它归结为知道 js 是如何实际处理事情的。

所以我只有两个函数（从代码中删除了一些数据）handlePagination: function () {

    var clickedItems = '.pagination-modal-choose-exams, #examsearchbox-submit';

    $(clickedItems).on('click', function (event) {
        event.preventDefault();

        // lot of clicking next prev 1, 2, 3 logic

        $.get(url, {
            currentPage: clickedPageNumber,
            name: name,
        }).done(function(data) {

            $.each(data.list, function(index, test) {
                var testId = test.id;
                var testName = test.name;

                exam.showPagination(data.totalPages, data.currentPage);
            });
        });
    });
},

所以在这里我得到了正确的结果，在这个函数中，我创建了与模态弹出窗口相同的元素。

showPagination: function (totalPages, currentPage) {
    $('.pagination').remove();
    var active = '';
    var pagination = '<ul class="pagination">';
    pagination += '<li class="pagination-modal-choose-exams" data-action-prev="1" id="prev"><a href="javascript:void(0)">Previous</a></li>';
    for (var i = 1; i <= totalPages; i++) {
        if (currentPage == i) {
            active = 'active';
        } else {
            active = '';
        }
        pagination += '<li class="' + active + ' pagination-modal-choose-exams"><a href="javascript:void(0)" data-action="' + i + '">' + i + '</a></li>';
    }
    pagination += '<li class="pagination-modal-choose-exams" data-action-next="1" id="next"><a href="javascript:void(0)" id="dfd">Next</a></li>';
    pagination += '</ul>';

    $('.paging-footer').append(pagination);
},

但是现在，有了这个新的分页，所有的按钮都不是可点击的。如何让它像模态弹出窗口一样工作。

标签： jquerymodal-dialog