Fatal编程技术网

Javascript 链接不适用于AJAX

javascript html ajax

Javascript 链接不适用于AJAX,javascript,html,ajax,Javascript,Html,Ajax,我正在学习在我的网站中使用AJAX，当我使用container.insertAdjacentHTML（“beforeend”，thing）向页面添加一些内容时；一切都显示得很好，但当我点击东西时，链接不会带我进入新页面（什么都没有发生） 这是密码…： var container = document.getElementById("sec"); var thing = `<div class="mdl-card coffee-pic mdl-cell mdl-cell--8-col

我正在学习在我的网站中使用AJAX，当我使用container.insertAdjacentHTML（“beforeend”，thing）向页面添加一些内容时；一切都显示得很好，但当我点击东西时，链接不会带我进入新页面（什么都没有发生）

这是密码…：

    var container = document.getElementById("sec");
var thing = `<div class="mdl-card coffee-pic mdl-cell mdl-cell--8-col">
            <div class="mdl-card__media mdl-color-text--grey-50">
              <h3><a href="entry.html">What is this?</a></h3>
            </div>
            <div class="mdl-card__supporting-text meta mdl-color-text--grey-600">
              <div class="minilogo"></div>
              <div>
                <strong>Illuminatiiiiii</strong>
                <span>3.14159265359 seconds ago</span>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <button onclick="pls()" class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent">
              <i class="material-icons mdl-color-text--white" role="presentation">add</i>
              <span class="visuallyhidden">add</span>
            </button>
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/1.jpg)">
              <a href="lib/i/?book=robinsoncrusoe.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Robinson Crusoe by Daniel Defoe</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/2.jpg)">
              <a href="lib/i/?book=thecallofthewild.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>The Call of the Wild by Jack London</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/3.jpg)">
              <a href="lib/i/?book=blackbeauty.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Black Beauty by Anna Sewell</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/4.jpg)">
              <a href="lib/i/?book=frankenstein.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Frankenstein by Mary Shelley</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/5.jpg)">
              <a href="lib/i/?book=achristmascarole.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>A Christmas Carole by Charles Dickins</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/6.jpg)">
              <a href="lib/i/?book=treasureisland.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Treasure Island by Robert Louis Stevenson</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/whitefang.jpg)">
              <a href="lib/i/?book=whitefang.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>White Fang by Jack London</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/dracula.jpg)">
              <a href="lib/i/?book=dracula.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Dracula by Bram Stoker</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/theprince.jpg)">
              <a href="lib/i/?book=theprince.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>The Prince by Niccolò Machiavelli</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/theadventuresofsherlockholmes.jpg)">
              <a href="lib/i/?book=theadventuresofsherlockholmes.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>The Adventures of Sherlock Holmes by Arthur Conan Doyle</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/commonsense.jpg)">
              <a href="lib/i/?book=commonsense.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Common Sense by Thomas Paine</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/astudyinscarlet.jpg)">
              <a href="lib/i/?book=astudyinscarlet.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>A Study in Scarlet by Arthur Conan Doyle</strong>
              </div>
            </div>
          </div>
          <div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
            <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/prideandprejudice.jpg)">
              <a href="lib/i/?book=prideandprejudice.epub"></a>
            </div>
            <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
              <div>
                <strong>Pride and Prejudice by Jane Austen</strong>
              </div>
            </div>
          </div>`;

var request = new XMLHttpRequest();
request.open('GET', "https://cortexreading-illuminatiiiiii.c9users.io/books.json");
request.onload = function(){
  var theData = JSON.parse(request.responseText);
  makeThingy(theData);
};
request.send();

function makeThingy(data){
    container.insertAdjacentHTML('beforeend', thing);
}

var container=document.getElementById（“sec”）；
变量对象=`
IIIII
3.14159265359秒前
添加
添加
丹尼尔·笛福的《鲁滨逊漂流记》
杰克·伦敦的《野性的呼唤》
安娜·苏厄尔的《黑美人》
玛丽·雪莱的《弗兰肯斯坦》
查尔斯·狄更斯的圣诞颂歌
罗伯特·路易斯·史蒂文森的《金银岛》
杰克·伦敦的白牙
布拉姆·斯托克的德古拉
尼科勒·马基雅维利的《王子》
亚瑟·柯南·道尔的《福尔摩斯历险记》
托马斯·潘恩的《常识》
亚瑟·柯南·道尔的《猩红》研究
简·奥斯汀的《傲慢与偏见》
`;
var request=new XMLHttpRequest（）；
request.open（'GET'，”https://cortexreading-illuminatiiiiii.c9users.io/books.json");
request.onload=函数（）{
var theData=JSON.parse（request.responseText）；
makeThingy（数据）；
};
request.send（）；
函数makeThingy（数据）{
container.insertAdjacentHTML（'beforeend'，thing）；
}
它全部进入一个id为“sec”的div中，小框应该是可点击的。如果我不使用AJAX，那么一切都可以正常工作。这是它的样子

我正在尝试单击图像，这是位于的div

JSON不是其中的一部分，这将在以后讨论

/更新-

我似乎已经发现了问题所在……所以我没有插入所有的HTMl，而是只插入了一张“卡片”，所以其他的东西都可以工作，而不是我添加的那张。我知道为什么现在，这是因为链接不再包含所有div，只是一个小区域。让我给你看……如果你仔细看，中间有一个小的链接，而不是整个图片div。 
`<div class="mdl-card something-else mdl-cell mdl-cell--8-col mdl-cell--4-col-desktop">
        <button onclick="pls()" class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent">
          <i class="material-icons mdl-color-text--white" role="presentation">add</i>
          <span class="visuallyhidden">add</span>
        </button>
        <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/1.jpg)">
          <a href="google.com">grg</a>
        </div>
        <div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600">
          <div>
            <strong>Robinson Crusoe by Daniel Defoe</strong>
          </div>
        </div>
      </div>`;

`
添加
添加
丹尼尔·笛福的《鲁滨逊漂流记》
`;
是新插入的HTML

您的锚定标记需要包装您正在单击的div。现在你已经在你要点击的div里面了。标签没有内容，因此不可读取

您的标记需要按以下方式进行结构：

<a href="lib/i/?book=blackbeauty.epub">
  <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/3.jpg)">
  </div>
</a>
如果你不想包装你的div，那么你的锚标签需要是一个块

  <div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" style="background-image:url(covers/3.jpg)">
    <a href="lib/i/?book=blackbeauty.epub" style="display:block; width: 100%; height:100%">
    </a>
  </div>



var container=document.getElementById（“sec”）；
var thing=`；
var request=new XMLHttpRequest（）；
request.open（'GET'，”https://reqres.in/api/users?page=2");
request.onload=函数（）{
var theData=JSON.parse（request.responseText）；
makeThingy（数据）；
};
request.send（）；
函数makeThingy（数据）{
container.insertAdjacentHTML（'beforeend'，thing）；
}
您点击的具体内容没有达到预期效果？请发布json响应检查您的浏览器开发人员工具控制台是否存在错误-尽管我看不出如果页面中出现错误，如何将硬编码的
内容成功放入页面AJAX@PHPglue除非他在我的背上与此无关，反勾号在这种情况下要好得多David，我正在尝试单击图像，即div所在的div。在这种情况下，整个div被视为一个链接，因为它的放置方式，所以可能正在做一些事情idk@KodySimpson这不应该是问题的一部分。检查更新的代码段。ajax和嵌套锚都不会导致问题。问题必须存在于代码的其他地方，或者在您的流程中。我似乎已经发现了问题……因此，请