链接无法与AJAX一起使用

Question

I'm learning to use AJAX in my website, and when I add some things to the page with container.insertAdjacentHTML('beforeend', thing); everything shows up fine but when I click things, the links don't take me to a new page(nothing happens).

Here is the code...:

    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);
}

It all goes into a div with an id called "sec" and the little boxes are supposed to be clickable. If I don't use the AJAX, then everything works fine. here is what it looks like...

http://prnt.sc/e4luzl

I am trying to click the image, that is div in which the is located

JSON is not a part of this, that is for later on.

/UPDATE -

I seem to have found the problem...so instead of inserting all that HTMl, i inserted only one "card" and so everything else works instead of the one I added. I know why now, it is because the link does encompass all of the div anymore, just one little area. Let me show you...: http://prntscr.com/e4m8wt If you look closely , there is alittle link in the middle instead of that whole picture div. Help with fixing this would be much appreciated...

`<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>`;

is the new inserted HTML

Answer 1

your anchor tags need to WRAP the div's you are clicking. right now you have INSIDE the div you are tying to click. tags have no content, and are therefor unclickable

your markup needs to be structured as follows:

<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>

if you dont want to wrap your div, then your anchor tag needs to be a block

  <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>

</div>