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());
    });

在我提到的第一行之后

Answer 2

当您处理动态内容时，事件委派是一种很好的做法。在您的情况下，您可以将click事件附加到父级。

我只是在原始代码中调整了一行：

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

现场演示：http://jsfiddle.net/zkDF4/6/

单击动态创建元素上的函数，该元素显示单击元素的内容

2 个答案: