ajax - jQuery .load() 函数在 .load() 完成后中断模态打开

Question

我正在使用 jQuery 的 .load()方法和Loading Page Fragments 。以下是我当前的代码:

$("#submit").click(function() {
    $("#results").load('/ajax/box/ #box');
});

此代码位于 moda 中，当单击 a.ajax-modal 时会调用该代码。问题是，当 .load() 完成时，#box 中的 a.ajax-modal 被加载到 # results 不起作用...它不会打开模式，而只是打开一个新页面。似乎 #box 的内容未绑定(bind)/附加到任何事件处理程序。

以下是正在发生的事情的概述:

1. 加载页面
2. 点击a.ajax-modal并显示模式
3. 在模态中提交表单，在模态中运行 .click() 函数
4. 页面刷新时 #results 中的内容
5. 点击 #results 中加载的新 a.ajax-modal，但模态不显示

为什么 .load() 完成后模式未打开？

Answer 1

尚未向您的元素添加任何事件，因为事件是在文档准备就绪时添加的。您需要使用.on() jQuery 的方法可以防止这种情况发生。

$(function()
    $(document).on('click', 'a.ajax-modal', function() {
       // Your code here.
    });
});

因此事件被添加到 document 而不是元素本身。