javascript - 单击动态创建的元素的功能，显示被单击元素的内容

Question

我创建了一个在顶部和底部页面导航的搜索页面。这是一个简化版本，只是为了显示我的问题:

$(function(){
$("select").on("click" , function(){
    if ($(this).val() == 10){
        var total_pages = 3;
        }
    else{
        var total_pages = 5;
        }
    var pages = "";

    for (var i = 1; i <= total_pages; i++)  {
        var pages = pages + "<span class='page'>" + i + "</span>";
        }
    $(".pagination").html(pages);
    });
$("select").click();

$(".page").on("click" , function(){
    alert($(this).text());
    });
});

您可以在这里自己尝试:

JSFiddle

在此示例中，当您每页选择 10 个元素时，您有 5 个页面；每页有 20 个结果时，有 3 个页面。但是，当您为每页选择其他值时，警报功能将不再显示。似乎文档加载后的更改没有被 document.ready 函数注意到。

我搜索了一下，看到了很多熟悉的问题和解决方法。我也可以想象一些替代方案，但不是一个能让我满意的方案。因为不幸的是，我现在不知道没有大量带有 id、类、数据属性等额外代码的简单解决方案。谁可以为我提供一些知识以获得好的解决方案？

Answer 1

那是因为当你这样做的时候:

$(".pagination").html(pages);

您删除旧的 DOM 元素及其“点击”功能并将其替换为新的 HTML。

添加这个:

$(".page").on("click" , function(){
    alert($(this).text());
    });

就在我提到的第一行之后