如何使用jQuery訪問動態創建的頁面元素（不是事件，ELEMENTS！）

Question

我在頁面上有幾個動態創建的元素，我想使用jQuery將內容發布到另一個頁面。 問題是，創建的元素無法通過jQuery訪問（只有頁面上存在的元素可以使用$（＃myElementID）訪問。我已經看到數百個帖子使用live（）和on（）函數進行訪問EVENTS，但無法訪問動態創建的ELEMENTS的任何屬性，值，innerHTML等。這是不可能用jQuery做的？

    $('#btnParseTable').click(function () {
        var tblCustomPattern = $("#tblCustomPattern").innerHTML; 


   //This test alert yields "" because tblCustomPattern is undefined - yet FireBug clearly shows the table exists!
        alert(tblCustomPattern); 


 var postData = { "method": "ParseTable", "tbl": tblCustomPattern };
        $.post("tiler.aspx", postData, function (data) {
            $("#test").html(data); //for testing
        });

});

如果jQuery不支持，可以用JavaScript完成，還是不能回發非“INPUT”元素的信息？

Answer 1

此測試警報產生“”因為tblCustomPattern未定義 - 但FireBug清楚地顯示該表存在！

您可以在將動態創建的元素添加到DOM后對其進行評估。 tblCustomPattern undefined因為jQuery對象沒有屬性innerHTML您需要DOM元素才能使用innerHTML但選擇器將返回jQuery對象。 您可以使用indexer []或[get()][1]從jQuery對象獲取html元素。 它是zero-based索引，您將獲得零index第一個元素。

var tblCustomPattern = $("#tblCustomPattern")[0].innerHTML; 

或者，使用.get（）

var tblCustomPattern = $("#tblCustomPattern").get(0).innerHTML; 

或使用html（）

var tblCustomPattern = $("#tblCustomPattern").html(); 

Answer 2

在這部分代碼中，您遇到了一個問題：

$("#tblCustomPattern").innerHTML;

問題是$("#tblCustomPattern")是一個jQuery對象。 它不是DOM對象。 jQuery對象沒有屬性.innerHTML 。

因此，要解決您的問題，您有以下幾種選擇：

1. 您可以從jQuery對象中獲取DOM元素，然后直接在DOM對象上使用.innerHTML屬性。
2. 您可以通過調用jQuery .html()方法將jQuery方法用於相同的功能。
3. 你甚至根本不需要jQuery，所以你可以使用普通的JS。

所以，任何這些都可行：

// get the first DOM object from the jQuery object
//    two different methods for doing that
var tblCustomPattern = $("#tblCustomPattern")[0].innerHTML; 
var tblCustomPattern = $("#tblCustomPattern").get(0).innerHTML; 

// use the jQuery method to get the HTML
var tblCustomPattern = $("#tblCustomPattern").html();

// use plain JS - fastest option
var tblCustomPattern = document.getElementById("tblCustomPattern").innerHTML;