1. Zuhause
  2. Frage und Antwort
  3. Links arbeiten nicht mit AJAX

Links arbeiten nicht mit AJAX

2017-02-05 13 views
-1

Ich lerne AJAX in meiner Website zu verwenden, und wenn ich einige Dinge mit container.insertAdjacentHTML auf die Seite hinzufügen ('beforeend', thing); alles zeigt sich gut, aber wenn ich Dinge anklicke, führen die Links nicht zu einer neuen Seite (nichts passiert). HierLinks arbeiten nicht mit AJAX

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

Es geht alles in ein div mit einer id genannt „sec“ und die kleinen Boxen sollen anklickbar sein. Wenn ich den AJAX nicht verwende, funktioniert alles gut. hier ist, wie es aussieht ...

http://prnt.sc/e4luzl

ich das Bild zu klicken versuche, ist, dass div in dem die

JSON befindet, ist kein Teil davon, dass für später auf.

/UPDATE -

scheinen ich das Problem gefunden zu haben ... so stattdessen alle, dass HTML-Code eingefügt, i eingefügt nur eine „Karte“ und so ist alles andere funktioniert statt der, die ich hinzugefügt. Ich weiß, warum jetzt, weil die Verbindung alle div mehr umfasst, nur ein kleines Gebiet. Lass es mich dir zeigen ...: http://prntscr.com/e4m8wt Wenn du genau hinsiehst, gibt es eine kleine Verbindung in der Mitte anstelle des ganzen Bildes div. Hilfe dieses mit Befestigungs wäre sehr geschätzt ...

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

ist die neue eingesetzte HTML

Quelle

2017-02-05 Kody Simpson

+0

Was Sie speziell sind cli Das zu tun ist nicht das, was du erwartest? – David

+0

posten Sie bitte die JSON-Antwort – TheRealMrCrowley

+0

überprüfen Sie Ihre Browser-Entwickler-Tools-Konsole für Fehler - obwohl ich nicht sehen kann, wie die hart codierte "Sache" konnte erfolgreich in die Seite gesetzt werden, wenn es einen Fehler in der AJAX –

Antwort

1

Ihre Anker-Tags müssen die divs einzuwickeln Sie klicken. Jetzt haben Sie INSIDE das Div, das Sie binden klicken. Tags haben keinen Inhalt, und sind dafür unclickable

Markup strukturiert werden muss, wie folgt:

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

wenn Sie nicht wollen Ihre div wickeln, dann muss Ihr Anker-Tag einen Block

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

Quelle

2017-02-05 00:36:25 TheRealMrCrowley

+0

In diesem wird das ganze div als ein Link betrachtet, wegen der Art, wie die platziert wird, so dass vielleicht etwas tut idk –

+0

@KodySimpson sollte nicht sein Teil des Problems. Überprüfen Sie das aktualisierte Snippet. weder der Ajax noch die verschachtelten Anker verursachen ein Problem. Das Problem muss an anderer Stelle in Ihrem Code liegen, oder in Ihren Routen – TheRealMrCrowley

+0

Ich habe das Problem gefunden ... also anstatt alle diese HTMl einzufügen, habe ich nur eine "Karte" eingefügt und so funktioniert alles andere als die eine I hinzugefügt. Ich weiß, warum jetzt, weil die Verbindung alle div mehr umfasst, nur ein kleines Gebiet. Lass es mich dir zeigen ...: http://printscr.com/e4m8wt Wenn du genau hinsiehst, gibt es eine kleine Verbindung in der Mitte anstatt dieses ganze Bild div. –

Verwandte Themen

 Verwandte Themen