如何使用ajax获取隐藏在模态中的输入类型的值

Good day..
i have modal and inside the modal i have div class

<div id="user-details-content" class="modal-body">
   ...
</div>

i supply the content inside that modal using ajax.
this is the supplied content:

<div id="hidden" class="hidden">
   <input type="hidden" name="id" class="id" id="id" value="1">
   <input type="hidden" value="email@email.com" class="email">
</div>

Now i try to get that input type="hidden" using this ajax

var id = $(this).parents('#user-details-content').find('.id').val();

but it returns undefined in my console.log

any suggestions ? on how to get that input type="hidden" and the value ?

EDIT - This is my ajax function

function inquiryId(){
    var id = $(this).parents('#user-details-content').find('.id').val();
    console.log(id);
    $.ajax({
        url: 'php_file.php',
        type: 'POST',
        data: { id: id,
        },
        dataType: 'json',
        success: function(result){
            console.log(result);
        }

    });
}

the problem may occurs because you loaded the html after the DOM loaded. i guess you have kind of event listener right ?

A workaround could be doing something like :

$(document).on('some_event', '#your_css_selector', function(e){
    // do your stuff here
});

Just want to get the input type=hidden value?

JQuery can get the value no matter it's hidden or show.

$('#id').val();
$('.email').val();

this is ok.

</div>

From the line of code:

var id = $(this).parents('#user-details-content').find('.id').val();

If you know the exact id and the class attributes of the input[type="hidden"], may I suggest using $("#id").val() and $(".email").val(). Below is a snippet to demonstrate my suggestion, hope it helps.

$(function(){
  $("button").click(function(event) {
    buttonSubmit_OnClick();
  });
});


function buttonSubmit_OnClick() {
  var message;
  message = "Hello " + $("#id").val() + "! ";
  message += $(".email").val();
  
  $("p").html($("p").html() + "<br>" + message);

  /* $.ajax() code-block goes here */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hidden" class="hidden">
  <input type="hidden" name="id" class="id" id="id" value="1">
  <input type="hidden" value="email@email.com" class="email">
  <button>Click me!</button><!-- this is for demo! -->
</div>
<p></p><!-- this is for demo! -->

As a side note:

For better client-side code optimization:

$(this) is powerful, but also a wild-card. jQuery is always updating the this, so, this may not always be what you expect it to be. Best be used only when you really have to, when you do, store its reference in a variable. Remember, with great power, comes great responsibility.
ID-Based Selectors are much faster because they handled by using document.getElementById() which is native to the browser instead of going through jQuery's sizzle selection engine.
Being specific if possible. Avoid universal selectors such as .children() or .parents().

Here is a more eloquent read on optimizing jQuery selectors.

</div>