javascript - 如何使 jquery 事件在具有动态内容和选择器的 Bootstrap 模式中工作？

Question

我在这方面花了很多时间，并浏览了大量的 SO 帖子，但没有成功。我知道我错过了一些明显的东西。我对 javascript 或 jquery 没有经验，所以请详细回答。

我的目标是打开一个模式并用十几组元素中的第一组填充它，并使用动态添加的分页(标记和唯一 ID)来浏览这些组。如果我不使用模态，我可以完成这项工作，但我需要该项目的模态类型的弹出窗口。

我使用一个插件打开模式，可以轻松加载 ajax 内容:

<p><span class="smr-popup">click for popup test</span></p>

<script src="/js/eModal.min.js"></script>

<script>
$(document).ready(function () {
 $(".smr-popup").click(smrPopup);
  function smrPopup() {
    eModal.ajax({
        size: 'lg',
        url: "page1.html",
        buttons: [
            { text: "Close", close: true, style: "danger" }
        ]
    }, "Title");
   }
 });
</script>

源页面底部的模态容器:

<div class="modal fade" tabindex="-1" style="display: none;" aria-hidden="true">
 <div class="modal-dialog modal-lg">
  <div class="modal-content">
   <div class="modal-header">
     <button type="button" class="x close" data-dismiss="modal">
       <span aria-hidden="true">×</span>
       <span class="sr-only">Close</span>
      </button>
      <h4 class="modal-title">Ajax modal <small></small></h4>
   </div>
  </div>
 </div>
</div>

填充模式后，我使用唯一的 id 动态添加分页。问题是，当我单击其中之一时，绝对没有任何反应，jquery 会忽略该单击。

<p>..... modal content loaded via ajax .....</p>

<span id="page2">goto page 2</span>
<span id="page3">goto page 3</span>

<script>
  $(document).ready(function() {
   $('#page2').on("click", function() { 
    $.get("page2.html");
   });
   $('#page3').on("click", function() { 
    $.get("page3.html");
   });
  });
</script>

我需要使用动态生成的选择器用新的ajax内容重新填充模态，并且我正在疯狂地尝试找出如何让jquery识别新的id。希望我已经说得足够清楚，这对某人来说是有意义的。预先感谢您的帮助!

Answer 1

jQuery 的第二个参数 on()函数是目标选择器。这些点击事件必须放置在动态元素父级(根据您的代码的 p 标记)上，然后您必须将 id 选择器参数作为第二个参数。