时间戳

首页 > 解决方案 > onclick 事件在嵌入的 html 中不起作用

javascript - onclick 事件在嵌入的 html 中不起作用

问题描述

我已经使用 .html 将一个 html 文件文本加载到一个 div 元素中XMLHttpRequest。我真正想说的是我有一个主 html 页面，其中填充了另一个 html 文件。问题是嵌入的html标签的onclick事件不起作用。好像虽然我已经将我的脚本添加到嵌入的html中，但是找不到和调用函数！因此，可以在控制台中看到以下错误。

该函数未在 HTMLParagraphElement.onclick 中定义

我检查了附加脚本的 src（在嵌入的 html 中），没问题。我还尝试将我的脚本移动到主页，因为我认为嵌入的 html 会看到其父 html 的脚本，尽管它没有成功。我确信我做过同样的事情，但我不记得我过去是怎么做的。

嵌入的 Html

<head>
    <title>Menue</title>
    <link href="../styles/menue.css" rel="stylesheet" />
    <script src="../scripts/menue.js"></script>

</head>

<div id="menueContainer">
    <h2 id="menueGameTitle">Monsters' Den</h2>
    <h4 id="menueDesignerTitle">Designed and developed by Retro-Code (Mr. Shahrokni)</h4>

    <p id="menueDescription" onclick="MyFunction()">
        ...
    </p>

</div>

* 主要的 Html*

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Monsters' Den</title>
    <link href="styles/Index.css" rel="stylesheet" type="text/css" />
    <script src="scripts/Index.js"></script>
</head>
    <body id="mainBody" onload="initIndexPage()">

        <div id="mainContainer">

            <div id="centeredFrame">

            </div>

        </div>
    </body>
</html>

我如何将嵌入的 html 加载到 div 中

function getHtml(url) {

    var xmlHttpRequest = new XMLHttpRequest();

    // add a random param at the end of the url to avoid cached data. 
    url = url + "?p=" + Math.random;

    xmlHttpRequest.open("GET", url, false);
    xmlHttpRequest.send(null);

    var response = xmlHttpRequest.responseText;
    return response;

}

function loadMenueinFrame() {

    var html = getHtml("./htmls/menue.html");
    var centeredFrame = document.getElementById("centeredFrame");
    centeredFrame.innerHTML = html;
}

我希望看到 onclick 事件的后果，但如上所述，它不起作用。希望大家给我指点。谢谢你。

标签： javascripthtml

解决方案

在你的 head 标签中加载脚本 Let mySelectedElement = document.getElementByID("mainContainer"); mySelectedElement.addEventListener("click", function getHtml(){ //your handler here })

我相信这应该有效

推荐阅读