Question

我正在编写一个应用程序，就像我们所有人一样......但是现在我已经弄错了一个我无法弄清楚的错误，我认为看到它会有一些新的眼睛会很好。< / p>

让我解释一下。简而言之，当我加载页面并且它是新的时，DOM功能正常工作，但在我用AJAX请求相同的页面后，DOM功能不起作用。

我有我的index.php，如下所示，包含的ajaxmineopslag.php也是我用AJAX请求的文件。在loggedinpage.js中调用AJAX请求作为函数＆＃34; sendDataAJAX＆＃34;。当你点击id mine_opslag_l或classer_tilbud_l时会触发该功能。这些id触发了该函数，并有一个参数，用于定义getinnerclassertilbud.php中包含的页面，该页面是请求发送到的页面。

发送请求后，ajaxmineopslag.php按预期执行，但DOM元素不起作用。现在不起作用的javascript函数是loggedinpage.js中的第一个函数，当单击settings-opslag时，应显示settings-opslag-wrapper。

感谢您的耐心和时间！

的index.php

<!DOCTYPE>    
<html>
<head>
     <title>Ajax</title>
     <style>
        .adddisplay {
          display: block;
         }

        .settings-opslag-wrapper {
          display: none;
         }

     </style>
</head>

<body>
   <a id="mine_opslag_l">Mine opslag</a> 
   <a id="classer_tilbud_l">Classers Tilbud</a>         
   <div id="mainchangercontent">

        <?php include "include/ajaxmineopslag.php"; ?>

   </div>


<script type="text/javascript" src="js/loggedinpage.js"></script>

 </body>
</html>

我的loggedinpage.js

const settingclick = document.getElementsByClassName('opslag-wrapper');

for (var i = 0; i < settingclick.length; i++) {
  settingclick[i].getElementsByClassName('settings-opslag')[0].addEventListener('click', function() {
    this.getElementsByClassName('settings-opslag-wrapper')[0].classList.toggle("adddisplay");
  });
}

document.getElementById("mine_opslag_l").addEventListener("click", function() {
  sendDataAJAX("1");
});
document.getElementById("classer_tilbud_l").addEventListener("click", function() {
  sendDataAJAX("2");
});

function sendDataAJAX(dataz) {

  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 & this.status == 200) {
      document.getElementById("mainchangercontent").innerHTML = this.responseText;

    }
  };

  xmlhttp.open("GET", "getinnerclassertilbud.php?p=" + dataz, true);
  xmlhttp.send();
}

getinnerclassertilbud.php页面

<?php
//init.php contains my db connection and such...
include "core/init.php";

if (isset($_GET)) {
    if (isset($_GET["p"])) {
        $p = $_GET["p"];
        if (!empty($p)) {
            if ($p == 1) {
                include "include/ajaxmineopslag.php";
            } else if ($p == 2) {
                //this is an other page like ajaxmineopslag.php, but this page does not annoy me for now
                include "include/ajaxclassertilbud.php";
            }
        }

      }
    }
?>

ajaxmineopslag.php页面

<div class="opslag-wrapper">
<div class="settings-opslag">
    <p>View hidden div</p>



    <div class="settings-opslag-wrapper">
        <p>This is the hidden div that does not show up after AJAX request</p>
    </div>

</div>
</div> 

<div class="opslag-wrapper">
<div class="settings-opslag">
    <p>View hidden div</p>



    <div class="settings-opslag-wrapper">
        <p>This is the hidden div that does not show up after AJAX request</p>
    </div>

</div>
</div> 

<div class="opslag-wrapper">
<div class="settings-opslag">
    <p>View hidden div</p>



    <div class="settings-opslag-wrapper">
        <p>This is the hidden div that does not show up after AJAX request</p>
    </div>

</div>
</div>

AJAX请求后，Javascript DOM无法正常工作

0 个答案: