时间戳

首页 > 解决方案 > 使用 AJAX 和 TWIG 显示模式时 JavaScript 无法正常工作

javascript - 使用 AJAX 和 TWIG 显示模式时 JavaScript 无法正常工作

问题描述

我遇到了 Javascript 问题。创建 Javascript modal 函数，使用 AJAX 获取其内容，innerHTML 函数将内容放入 modal。模态显示内容没有问题，但 Javascript 在其中不起作用。当我检查元素时，它显示...具有我需要的所有功能，但这不起作用。我使用树枝模板机来渲染页面和模态，所以也许它会导致这个问题？

// index.php where modal shows up

echo $twig->render(...);

// Modal function

function openModal() {

    const request = new XMLHttpRequest();
    request.open('post', 'modalfile.php');
    request.onload = function () {
        document.querySelector('.modal-content').innerHTML = request.response;
    }

    request.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send();

    document.querySelector('.overflow').style.visibility = 'visible';
    document.querySelector('.modal').style.visibility = 'visible';
}

// modalfile.php

echo $twig->render(...);

如果我是对的并且 Javascript 问题导致 Twig - 是否有可能解决该问题？或者可能是其他问题？

标签： javascriptphpmodal-dialogtwig

解决方案

如果我没有误解，您需要将侦听器绑定到不属于 ajax 呈现的 html 的父标记。

查看jQuery on()。

对我来说，我有时会像这样绑定到 body 标签（如有必要）：

$('body').on('click', '.mySelector', myHandler);

这只是我谦虚的解决方案。如果您需要更多详细信息，请查看： 动态创建元素上的事件绑定？

推荐阅读