链接不适用于AJAX

Question

我正在学习在我的网站中使用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);
}

这一切都进入了一个名为“sec”的id的div，小盒子应该是可点击的。如果我不使用AJAX，那么一切正常。这就是它的样子......

http://prnt.sc/e4luzl

我正在尝试点击图片，即位于其中的div

JSON不是其中的一部分，以后会用到。

/更新 -

我似乎找到了问题...所以我没有插入所有HTMl，而是只插入了一张“卡”，所以其他所有工作都取而代之，而不是我添加的那张。我知道为什么现在，这是因为链接确实包含了所有的div，只是一个小区域。让我告诉你......：http://prntscr.com/e4m8wt如果仔细观察，中间会有一个小连接，而不是整个画面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

Answer 1

你的锚标签需要WRAP你点击的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 = `<div><a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1">inserted</a></div>`;

var request = new XMLHttpRequest();
request.open('GET', "https://reqres.in/api/users?page=2");
request.onload = function(){
  
  var theData = JSON.parse(request.responseText);
  makeThingy(theData);
};
request.send();

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

<a id="sec" href="http://stackoverflow.com/questions/2530377/list-of-phone-number-country-codes">
  </a>