Блог

Я работаю над PHP-приложением, в котором я использую jquery для добавления данных в загрузочный модал. Я пытаюсь использовать селектор jquery, чтобы получить идентификатор тега A, а затем выполнить некоторые действия. У меня возникли проблемы с тем, чтобы заставить селектор выполнять некоторые действия.

Идентификатор #saveScore не выбирается????

Я поместил инструкцию журнала консоли в функцию начального щелчка, чтобы убедиться, что идентификатор находится в DOM. Я получаю результат с помощью этого оператора.

Вот мой код

 $(document).ready(function(){
    $(document).on('click', 'a[data-role=score]', function(){

        var id = $(this).data('id');
        var team_name1 = $('#' id).find('p[data-target=team_name1]').text();
        var team_image1 = $('#team1_image' id).data('image');
        var team_name2 = $('#' id).find('p[data-target=team_name2]').text();
        var team_image2 = $('#team2_image' id).data('image');
        var team1_score = $('#scoreID' id).find('p[data-target=team1_score]').text();
        var team2_score = $('#scoreID' id).find('p[data-target=team2_score]').text();

       
       
        $('#team_name1').html(team_name1);
        $('#team_name2').html(team_name2);
        $('#team_image1').removeClass().addClass("col-4 flag ").addClass(team_image1);
        $('#team_image2').removeClass().addClass("col-4 flag ").addClass(team_image2);
        $('#modal_team1_score').val(Number(team1_score));
        $('#modal_team2_score').val(Number(team2_score));

        $('#scoreModal').modal('toggle');
       
        console.log( $('#saveScore'));
    });

  

    $("#saveScore").click(function(){
        alert('test');
        
        
    });
})  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-footer">
        <button type="button" class="btn btn-secondary " data-dismiss="modal">Close</button>
        <a href="#" id="saveScore" class="btn btn-primary">Update Score</a>
 </div>  

Прямо сейчас я просто пытаюсь получить всплывающее предупреждение, показывающее, что выбран идентификатор #saveScore.

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

Проблема, похоже, в том, что он .modal-footer находится за пределами .modal-content элемента. Он должен быть вложен внутрь. Это действительно легко пропустить.

Вот первый пример из документации Bootstrap 4.0 для модального:

 <div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
  

Вы заметите, что все три раздела модального содержимого ( .modal-header , .modal-body и .modal-footer ) вложены в .modal-content элемент. Если я просто открою DevTools на вашем сайте и перетащу .modal-footer элемент внутрь .modal-content элемента сразу после .modal-body , кажется, что он действует так, как требуется.

Моим первым тестом было просто открытие консоли и выдача $('#saveScore').trigger("click"); , которая выдала предупреждение, как и предполагалось, поэтому оказалось, что пользователь не смог нажать кнопку — затем я использовал inspect element и навел курсор на кнопку, но все, что выбирал Chrome, было фоном, который создает модал; кажется, что фон находится перед (по z-индексу) .modal-footer , если он находится за пределами .modal-content .

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

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

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

 $(document).on("click" , "#saveScore" , function(){
    /*   write your code here*/
   alert('test');

});
  

для получения дополнительной информации перейдите по этой ссылке