popup trigger when click the input field in jquery mobile?

Question

I am create a jquery mobile website.I want a popup raised when i click a input field.

<input type="text" class="popup_trigger" name="type_of_services" placeholder="Type Of Services" data-rel="popup" data-transition="pop" data-clear-btn="true">

<div data-role="popup" id="popup_service" class="popup_service">
   <label for="check_box"><input type="checkbox" name="checkbox-0">service</label>
</div>

jquery code :

$(document).ready(function() {
   $(".popup_trigger").click(function() {
      $("#popup_service").popup();
   });
});

I also try

$(".popup_service").popup();

Answer 1

Try this code:

$('.popup_triger').on('click', function () {
  $("#popup_service").popup('open');
});

You should use open method.

Answer 2

Try this:

$(document).on('click', '.popup_triger', function () {
  $("#popup_service").popup();
});

also don't use above event inside $(document).ready();