Почему элемент источника клика перемещается в модальное окно?

Question

Текущий статус

Я использую модальный плагин jQuery под названием izimodal . И я пытаюсь отобразить iframe в модальном окне.
Таким образом, оригинальный элемент перемещается в модальное окно.
В чем дело?

---

Код

Код, который кажется связанным:
Код, который я вставил для реализации нумерации страниц. Модальное окно не будет работать, пока я не удалю это. (Этот код нумерации страниц закомментирован также в GIF выше) Даже если я удалю этот код, оригинальный элемент будет двигаться как gif ..

function tpl(data) {
  var html = '';
  $.each(data, function(index,item) {
      html += '<section class="item">' + item + '</section>';
  });
  return html;
}
// ↑ Modal won't work unless I delete this

$(function() {
  var len = $('.item').length;

  $('#no-p').pagination({
    dataSource: function(done) {
      var result = [];
      for (var i = 0; i < len; i++) {
        var $item = $('.item').get(i);
        if ($item) result.push($item.innerHTML);
      }
      done(result);
    },
    pageSize: 8,
    showPageNumbers: false,
    showNavigator: true,
    autoHidePrevious: true,
    autoHideNext: true,
    callback: function(data,pagination) {
      var html = tpl(data);
      $('#items').html(html);
    }
  });
});

Изимодальный код:

// In case of item1
$(document).on('click', '.item1', function (event) {
  $(".item1").click(function (event) {
    event.preventDefault();
    $('#iframe').iziModal('open', {
      iframeURL: $this.data('href')
    });
  });
  $("#iframe").iziModal({
    iframe: true,
    width: '98%',
    iframeHeight: 600,
    zindex: '110',
    iframeURL: "data.html",
    group: 'works',
    overlayColor: 'rgba(0,0,0,0.1)'
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css" rel="stylesheet"/>

<div class="list">
<div class="items">
 <section id="iframe" class="item item1" data-izimodal-iframeurl="data-1.html" data-izimodal-open=#iframe data-href="/iframe_url1">
   <img src="http://placehold.jp/253x180.png" alt="1" />
   <h2>title1</h2>
   <p>description1 description1</p>
 </section>
 <div id="modal"></div>
 
 <section class="item item2" data-izimodal-iframeurl="data-2.html" data-izimodal-open=#iframe data-href="/iframe_url2">
   <img src="http://placehold.jp/253x180.png" alt="2" />
   <h2>title2</h2>
   <p>description2 description2</p>
 </section>
 
 <section class="item item3" data-izimodal-iframeurl="data-3.html" data-izimodal-open=#iframe data-href="/iframe_url3">
   <img src="http://placehold.jp/253x180.png" alt="3" />
   <h2>title3</h2>
   <p>description3 description3</p>
 </section>
 
 <section class="item item4" data-izimodal-iframeurl="data-4.html" data-izimodal-open=#iframe data-href="/iframe_url4">
   <img src="http://placehold.jp/253x180.png" alt="4" />
   <h2>title4</h2>
   <p>description4 description4</p>
 </section>
 
 <section class="item item5" data-izimodal-iframeurl="data-5.html" data-izimodal-open=#iframe data-href="/iframe_url5">
   <img src="http://placehold.jp/253x180.png" alt="5" />
   <h2>title5</h2>
   <p>description5 description5</p>
 </section>
 
 </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Почему оригинальный элемент прикреплен к модальному окну?
У меня большие проблемы .. Пожалуйста, помогите мне! х (