Javascript：对 ajax 加载的数据使用脚本答案

【问题标题】：Javascript: Using a script for ajax-loaded dataJavascript：对 ajax 加载的数据使用脚本
【发布时间】：2014-07-08 17:21:52
【问题描述】：

我有一个网页，我想在其上输出事件。这些事件通过 ajax 通过 php 脚本输出。当每个事件底部的用户单击“查看事件”链接时，我希望弹出一个模式窗口。我一直在使用 magnificPopup 脚本。

这个弹出脚本在数据已经存在并且没有通过 ajax 加载的页面上完全可以正常工作。该脚本获取点击按钮的 id 并将 HTML 内容打开为模态，其 ID 与点击按钮的 href-tag 相同。

已编辑

我有几个通过 ajax 加载的事件：

每个元素都有相同的类。
每个事件都通过各自的模式窗口加载。
按钮的href，相当于要打开的模态窗口的id，和magnificPopup脚本命令中使用的按钮的id，都是动态生成的，当页面加载。

这里是一个事件 div 及其模态窗口 div 的示例（记住：它们不预先包含在网页中，它们是通过 ajax 加载的）：

// Event div
<div class="event">
<a href="modal_admin_view-69" id="show_modal_admin_view-69" class="event_action_button">view</a>
</div>
</a>

// Modal window
<div id="modal_admin_view-69" class="mfp-hide"><p>I am the modal window!</p></div>

为了灵活地启用任何事件按钮以根据其 href 打开它应该打开的模式窗口，我的网页上的宏伟弹出脚本需要看起来像什么？

我已经在我的网页上尝试了以下操作，但它不起作用：

$('body').on('click', '.event_action_button', function() {

    $.magnificPopup.open({
        removalDelay: 500, //delay removal by X to allow out-animation
        callbacks: {
            beforeOpen: function() {
            this.st.mainClass = this.st.el.attr('data-effect');           },
        midClick: true
    });

});

【问题讨论】：

“我已经尝试通过 PHP 脚本将脚本与事件一起输出，但我无法让它工作。” - 为什么这不起作用？错误是什么？你还尝试了什么？

标签： javascript php jquery ajax magnific-popup

【解决方案1】：

您正在尝试为元素的放大弹出窗口启动直接绑定，但该元素在被 AJAX 填充之前并不存在于 DOM 树中。要解决此问题，您需要使用委托绑定，例如 .on()：

jQuery .on() documentation

试试这样的：

$('body').on('click', '#id_of_event_button', function() {
  $.magnificPopup.open({
      removalDelay: 500, //delay removal by X to allow out-animation
      callbacks: {
          // callbacks
      },
      midClick: true
  });
});

【讨论】：