使用JQuery获取动态添加的元素的数据

Question

与Dynamically added HTML elements can't be found using jQuery类似的问题，但是，我想访问新元素的数据，而不是其事件。

JQuery通过AJAX请求添加元素。当我尝试访问DOM时，它并没有丢失。

<button id="get-data">Get data</button>
<div id="container">
    <!-- everything here is added through the first ajax call -->
    <button id="update-data">Update</button>
    <input type="hidden" id="elem" data-data="someData" />
</div>

所以我尝试了：

$('#elem').data('data');
$(this).parents().find('#elem').data('data');
$(document).find('#elem').data('data');

...没有成功。

并且它不起作用：JQuery在DOM中找不到#elem：

console.log($('input'));
// OR
console.log($(document).find('input'));

...输出DOM中input项的列表，但是#elem在此列表中不是。

我猜测我无法使用$().find()或直接$()来获取动态添加的内容，那么如何获取呢？

这是我的JS的组织方式：

$(function() {
    $('#get-data').click(function() {
        $.ajax({
            url: "/"
        }).done(function() {
            $('#container').html(ajaxResult)
        });
    });
    $(document).on('click', '#update-data', function() {
        $.ajax({
            url: "/new",
            data: $('#elem').data('data')
        });
        //This ajax call doesn't work as expected because data is missing.
        //#update-data is inserted by the first AJAX call, but the click even is catched without any problem here.
    });
});

经过进一步研究后进行编辑：

我试图输出不同的JQuery选择器的结果：

$('#container').find('#elem');

  

JQuery对象（长度：0）=> prevObject：[input＃elem]

---

$('#container').find('#elem').first();

  

JQuery对象（长度：0）=> prevObject：JQuery对象（长度：0）=> prevObject：[input＃elem]

---

$('#elem');
//or
$(document).find('#elem');
//or
$('#container #elem');

  

JQueryObject（长度：0）=> prevObject：[HTMLDocument my_website.com]

---

$('#elem').first();
//or
$(document).find('#elem').first();
//or
$('#container #elem').first();

  

JQuery对象（长度：0）=> prevObject：JQuery对象（长度：0）=> prevObject：[HTMLDocument my_website.com]

Answer 1

当我使用隐藏的选择器时，我可以使用它。它们都在下面工作：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<div class="row">
    <div class="col">

        <button id="get-data">Get data</button>
        <div id="container">
            <!-- everything here is added through the first ajax call -->
            <button id="update-data">Update</button>
            <button id="find-element">Find</button>
            <input type="hidden" id="elem" data-data="someData" />
        </div>
    </div>

</div>
<script type="text/javascript">
    $(document).ready(function () {

        $('#find-element').bind("click", function () {
            // your statements;

            var boo = $('#elem').data('data');
            var foo = $("#elem:hidden").data('data');
            alert(boo + "\n" + foo);
        }); 



    });
</script>