简单模态ajax

Question

我有这个函数 roadajax() 将数据附加到 .modal-content

$(".modal-content").append("text here");

这个 .modal-content 设置为 display:none;

然后我将 OnClick 添加到元素，因此当我单击该元素时，它会在 .modal-content 上打开一个模态并在模态上显示它的内容

$(document).on("click", ".element", function() {
    // remove the current active element
    $(".element").removeClass("active-element");
    // add active class on the current element
    $(this).addClass("active-element");
    curitem = $(this).attr("id");
    roadajax(); // assigns content to .modal-content
    // showing the current element modal
    $(".active-element .modal-content").modal();
});

当我点击 .element 事件处理程序时，我看到了模态！但没有数据 所以我用萤火虫检查了它..

如果我从我的事件处理程序中删除了 .modal() 调用，则发生正常逻辑并且 .modal-content 由 raodajax() 填充 但是如果我重新添加 .modal() 调用 .. roadajax() 似乎无法将数据加载到 .modal-content .. 某种竞争条件

我想知道如何将我的数据显示为模态......还有其他方法吗？

Answer 1

您可以通过放置以下语法来使用直接 Ajax 模型：

例如

function roadajax() {
     // This is In-built Ajax Functionality Provide by SimpleModel
     $('.modal-content').load('http://yoursite.com/page.html').modal();
}

这将自动在模型中加载您的页面。