0

I am working on this demo. How can I get the value of $(this) or even checked element when dynamically adding some checkboxes to a hidden content like bootstrap modal?

$('#exampleModal').on('show.bs.modal', function(e) {

  for (var i = 0; i < 3; i++) {
    $('.modal-body').append('<input type="radio" name="addOD" value="item' + i + '" />');
  }
})

$('input:radio[name=addOD]').on('click', function() {
  console.log($(this).val());
  var val = $('input:radio[name=lenseopttype]:checked').val();
  console.log(val);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
halfer
  • 19,824
  • 17
  • 99
  • 186
Mona Coder
  • 6,212
  • 18
  • 66
  • 128

1 Answers1

1

If the inputs are dynamically added, change your on click handler to something like this.

$(function () {
    $(document).on('click', 'input:radio[name=addOD]', function () {
        console.log($(this).val());
        var val = $('input:radio[name=lenseopttype]:checked').val();
        console.log(val);
    });
});

This post will help explain it a bit further

NickAndrews
  • 496
  • 2
  • 9
  • 1
    "What is this?" "Why does this solve my problem?" Please add more explination to your solution. – Taplar Mar 22 '19 at 14:33
  • Change your click event to use $(document).on('click'.... – NickAndrews Mar 22 '19 at 14:33
  • 3
    Not me. The OP. The OP may not understand what that form of `on()` is, and why it solves the problem. Solving the problem is half of an answer. Explaining to the OP how it solves the issue, is the other half. – Taplar Mar 22 '19 at 14:34
  • 3
    If a link explains your answer, then your answer is a duplicate. – Taplar Mar 22 '19 at 14:36
  • The question and answer are duplicates. And your answer explains the solution much less than the other answers that already exist on the site. It does solve the issue, which is the only reason I'm not downvoting it. But again, simply saying "this fixes it" is the mark of a low quality answer. – Taplar Mar 22 '19 at 14:39
  • Thanks for the extra info. I'm learning. I do appreciate you explaining your actions. – NickAndrews Mar 22 '19 at 14:50