如何使用 jQuery 访问动态创建的页面元素（不是事件，元素！）

Question

我在一个页面上有几个动态创建的元素，我想使用 jQuery 将内容发布到另一个页面。问题是，创建的元素不能通过 jQuery 访问（只有页面上存在的元素可以使用 $(#myElementID) 访问。 我已经看到数百篇使用 live() 和 on() 函数访问事件的帖子，但无法访问动态创建的元素的任何属性、值、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 对象。您可以使用索引器 [] 或 [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;