javascript - 如何使用 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

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

您可以在将动态创建的元素添加到 DOM 后对其进行评估。 tblCustomPattern 是 undefined 因为 jQuery 对象没有属性 innerHTML 你需要 DOM 元素来使用 innerHTML 但是选择器会返回给你 jQuery 对象。您可以使用索引器 [] 或 [get()][1] 从 jQuery 对象中获取 html 元素。它是基于零的索引，您将在零index处获得第一个元素。

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

或者，使用 .get()

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

或使用 html()

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