點擊動態創建的元素上的功能，顯示點擊元素的內容

我已經創建了一個搜索頁面，有頂部和底部頁面導航。這是一個簡化版本，只是爲了顯示我的問題：點擊動態創建的元素上的功能，顯示點擊元素的內容

$(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

在這個例子中，你有5頁，當您選擇每頁10個項目和3頁，每頁20個結果。但是，當您每頁選擇一個其他值時，警報功能不再顯示。看起來，文檔加載後的更改沒有被document.ready函數注意到。

我搜索並看到了很多熟悉的問題及其解決方案。我可以想象一些替代品，但不能滿足我的人。因爲不幸的是，我現在不知道一個簡單的解決方案，沒有很多額外的代碼與ID，類，數據屬性等。誰可以爲我提供一些好的解決方案的知識？

來源

2014-02-05 Dinizworld

http://jsfiddle.net/hQ7Ee/的[在jQuery中，如何將事件附加 –

可能重複動態html元素？]（http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements） –

學習[**事件委託**]（ http://learn.jquery.com/events/event-delegation/） – Satpal

這是因爲當你這樣做：

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

將刪除舊的DOM元素，它的「點擊」功能和新的HTML代替它。

補充一點：

後

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

正確的第一線，我提到

來源

2014-02-05 19:50:11

事件代表團是一個很好的做法，當你處理動態內容。在你的情況下，你可以將點擊事件附加到父項。

我只是調整了一行在原始代碼：

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

現場演示：http://jsfiddle.net/zkDF4/6/

來源

2014-02-05 20:18:57 Christophe

點擊動態創建的元素上的功能，顯示點擊元素的內容

回答

相關問題