Сбой внешнего содержимого jquery .load () в модальном режиме - PullRequest
Новая
       11

Сбой внешнего содержимого jquery .load () в модальном режиме

0 голосов
/ 28 августа 2018

Я пытаюсь загрузить внешний блок html с помощью функции jquery .load (), но он не может правильно отобразиться в модальном всплывающем окне (примечание: та же проблема с .get ())

код: 

 $('#butt2').on('click', function() {
    $('#mbodyko').load('nav.html', function() {
        $('#myModalnok').modal({show: true });
      });
    });

Рендеринг плохой, вот проблема:

http://plnkr.co/edit/z9oQPVG2F9oYaJCzovN5?p=preview

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

Знаете почему? Спасибо за ваши подсказки!

1 Ответ

0 голосов
/ 28 августа 2018

Все, что я сделал, чтобы заставить его работать, это удалил первый модальный html, как это: 

<html dir="ltr" lang="en-US">
<head>
<link rel="stylesheet" 
href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body>
<hr>
<button class="btn btn-primary btn-lg" id="butt1">modal OK</button>
<br />
<br />
<button class="btn btn-primary btn-lg" id="butt2">modal NOK - use jquery .load</button>

 <div class="modal fade" id="myModalnok" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-body">
       <div class="modal-content">
         <div class="modal-header">
           <h4 class="modal-title" id="myModalLabel">Problem: click does not change the tabs!</h4>
         </div>
         <div class="modal-body" id="mbodyko">
         </div>
       </div>
     </div>
   </div>
 </div>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
  <script>
      $('#butt1').on('click', function() {
        $('#myModalok').modal({
          show: true
        });
    });

    $('#butt2').on('click', function() {
      $('#mbodyko').load('nav.html', function() {
        $('#myModalnok').modal({
          show: true
        });
      });
    });
</script>
</body>
</html>

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

...