Get data of dynamically added elements using JQuery

Question

Very similar problem to Dynamically added HTML elements can't be found using jQuery but, I want to access new element's data and not its event.

The element is added by JQuery through AJAX request. It is not missing to the DOM when I try to access it.

<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>

So I tried :

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

...with no success.

And it's not going to work : JQuery doesn't find #elem in the DOM :

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

...output a list of the input items in the DOM, but #elem is not in this list.

I'm guessing that I can't use $().find() nor the direct $() to get dynamically added content, so how to I get it ?

Here is how my JS is organized :

$(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.
    });
});

Edit after further research:

I tried to output the result of different JQuery selectors :

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

JQuery Object (length: 0) => prevObject : [ input#elem ]

---

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

JQuery Object (length: 0) => prevObject : JQuery Object (length: 0) => prevObject : [ input#elem ]

---

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

JQueryObject (length: 0) => prevObject : [ HTMLDocument my_website.com ]

---

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

JQuery Object (length: 0) => prevObject : JQuery Object (length: 0) => prevObject : [ HTMLDocument my_website.com ]

Answer 1

I have this working when I use the hidden selector. They both work below:

<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>