Как добавить текст в модал по нажатию кнопки

Question

У меня есть этот модал

 <div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></span></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                           <div class="credit-scoring">
                                <label for="credit-scoring" class="form-control-label">Credit Scoring:</label>
                                <input type="text" class="form-control" id="credit-scoring">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>
                    </div>
                </div>
            </div>
        </div>

и я хотел бы добавить текст в <span id="bankAssessBondId"></span> при нажатии следующей кнопки

<button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">
Bank Assess
</button>

так как у меня есть несколько кнопок для этого, я использую EventListener следующим образом

var buttons = document.getElementsByClassName('btn btn-success bank');
    for(var i=0; i<buttons.length; i++){
        buttons[i].on("click", function(){
             $('#bankAssessBondId').append($(this).value)
        })
}

но событие кнопки «щелкнуть» не обнаружено. Как я могу это исправить?

Answer 1

Вы можете получить кнопку по имени класса, используя

$(".bank").on('click', function () {
  alert('clicked');
    $('#bankAssessBondId').append($(this).attr('value'));
});

Также добавьте значение кнопки к id = "bankAssessBondId"

<span id="bankAssessBondId"></span>
<button class="btn btn-success bank" type="button" data-toggle="modal" data-target="#bankAssess" value="bond3">
Bank Assess
</button>

Используя образец вашего кода

Вот рабочий пример. https://codepen.io/anon/pen/oQGJOm

Answer 2

Для элементов, которые генерируются динамически, вам нужно использовать делегированные события формы функции JQuery on () :

$('body').on('click', '.btn.btn-success.bank', function() {
    $('#bankAssessBondId').append($(this).value)
}

Я использовал «тело» в этом случае в качестве родительского элемента, но это может быть любой элемент, который является родительским для кнопок.

Answer 3

При выборе элемента с несколькими классами селекторы должны быть указаны без пробелов, как показано ниже.

$('.btn.bank.btn-success')

Также в этом случае модал должен быть открыт со скриптом, поскольку значение диапазона внутри модального контура необходимо динамически изменять.

$('#bankAssess').modal('toggle');

$(function() {


  $('.btn.bank.btn-success').click(function() {

    var val = $(this).attr("value");

    console.log(val);

    $('#bankAssessBondId').append(val);
    $('#bankAssess').modal('toggle');

  });


});

#bankAssessBondId {
  color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="modal fade" id="bankAssess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelBank" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabelBank">Bank Assess <span id="bankAssessBondId"></span></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="credit-scoring">
            <label for="credit-scoring" class="form-control-label">Credit Scoring:</label>
            <input type="text" class="form-control" id="credit-scoring">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" id="submit-form-Bank">Submit</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-success bank" type="button" data-target="#bankAssess" value="bond2">
Bank Assess
</button>

<button class="btn btn-success bank" type="button" data-target="#bankAssess" value="bond3">
Bank Assess
</button>

Answer 4

Ваша проблема заключается в том, что вы пытаетесь использовать jQuery на с элементом, который был обнаружен без использования jQuery.На мой взгляд, у вас есть два возможных решения в зависимости от того, чего вы пытаетесь достичь.

1. используйте addEventListener

   var buttons = document.getElementsByClassName('btn btn-success bank');
   for(var i = 0; i < buttons.length; i++) {
       buttons[i].addEventListener("click", function(){
            $('#bankAssessBondId').append($(this).value)
       })
   }
   

2. используйте jQuery для выбора кнопок и используйте функцию .on для применения прослушивателя щелчков ко всем возвращаемым элементам

   var buttons = $(".btn.btn-success.bank");
   
   buttons.on("click", () => {
       //do stuff here
   });
   

Надеюсь, это поможет!