Получить данные динамически добавленных элементов, используя JQuery

Question

Очень похожая проблема на Динамически добавленные элементы HTML не могут быть найдены с помощью 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 не находит #elem в DOM:

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

... выводит список input элементов в DOM, но #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 Object (длина: 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>