CSS + Anker Link zu dynamisch geladenen Element aus Datei mit jQuery funktioniert nicht

Ich muss in der Lage sein, nur verankerte div und in der Lage sein, die Verbindung mit diesem Anker zu teilen. Es funktioniert nicht wie erwartet (versuchen Sie bar1 (blank)bar2 (blank) Link). Das Laden der Seite main.html (siehe unten) mit einem Anker bar1 oder bar2 (www.foo.bar/main.html#bar1) kann css und jQuery nicht ordnungsgemäß verarbeiten, wenn bar1 (oder bar2) aus Datei geladen wird. Wenn andererseits # foo element als HTML-String angehängt wird, dann scheint die verankerte Verbindung zu funktionieren (z. B. www.foo.bar/main.html#foo). Zum Vergleich Verhalten Klick foo (blank), bar1 (blank), bar1, bar2 (blank) und bar2 Links, bar1 (blank) und bar2 (blank) Links scheitern bar1 (oder bar2) div zu zeigen. Anscheinend hängt es mit asynchronem Dateiladen zusammen. Gibt es eine Möglichkeit, dieses Problem zu umgehen?CSS + Anker Link zu dynamisch geladenen Element aus Datei mit jQuery funktioniert nicht

main.html:

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
     <script> 
$("<div>").load("bar1.html #bar1", function() { 
    $('body').append($(this).html()); 
}); 
$("<div>").load("bar2.html #bar2", function() { 
    $('body').append($(this).html()); 
}); 

$(function() { 
    $('body').append("<div id='foo' style='background-color:#8F8;'>FOO</div>"); 
}); 
     </script> 
     <style> 
div:not(:target) { display: none; } 
div:target { display: block; } 
     </style>  
    </head> 
    <body> 
     <a href="main.html#foo" target="_blank">foo (blank)</a> 
     <a href="main.html#bar1" target="_blank">bar1 (blank)</a> 
     <a href="main.html#bar1">bar1</a> 
     <a href="main.html#bar2" target="_blank">bar2 (blank)</a> 
     <a href="main.html#bar2">bar2</a> 
    </body> 
</html>

bar1.html:

<div id='bar1'>BAR1</div>

bar2.html:

<div id='bar2'>BAR2</div>

Quelle

2016-05-24 alex

Added ein Dateizähler tun könnte und eine Funktion, die Dekrementiert den Zähler, um das Anker-Tag zurückzusetzen.

main.html

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
     <script> 
var count = 2; 

function onDataHandled() { 
    if (--count <= 0) { 
     var hash = window.location.hash; 
     window.location.hash = ''; 
     window.location.hash = hash; 
    } 
} 

$.get('bar1.html', function (data) { 
    $('body').append(data); 
    onDataHandled(); 
}); 
$.get('bar2.html', function (data) { 
    $('body').append(data); 
    onDataHandled(); 
}); 

$(function() { 
    $('body').append("<div id='foo' style='background-color:#8F8;'>FOO</div>"); 
}); 
     </script> 
     <style> 
div:not(:target) { display: none; } 
div:target { display: block; } 
     </style>  
    </head> 
    <body> 
     <a href="main.html#foo" target="_blank">foo (blank)</a> 
     <a href="main.html#bar1" target="_blank">bar1 (blank)</a> 
     <a href="main.html#bar1">bar1</a> 
     <a href="main.html#bar2" target="_blank">bar2 (blank)</a> 
     <a href="main.html#bar2">bar2</a> 
    </body> 
</html>

Quelle

2016-05-25 11:46:14 alex

nicht sicher, was Ihre volle Ich versuche es zu tun.

Aber versuchen Sie wickeln Ihre jQuery in Dokument bereit

<script> 
    $(document).ready(function(){ 

    $("<div>").load("bar.html #bar", function() { 
     $('body').append($(this).html()); 
    }); 

    $('body').append("<div id='foo' style='background-color:#8F8;'>FOO</div>"); 

    }); 
</script>

Quelle

2016-05-24 13:15:59 Mark

Es hilft nicht. Ich muss in der Lage sein, nur verankerte div zu zeigen und in der Lage zu sein, die Verbindung mit diesem Anker zu teilen. In diesem Beispiel erwarte ich nach dem Drücken von "bar (leer)", dass die geöffnete Seite "BAR" zeigt, dies nicht tut. – alex

Sie so etwas für main.html

<html> 
    <head> 
     <style> 
     div{ 
      display: none; 
     } 
     </style> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $("<div>").load("bar.html #bar", function() { 
        $('body').append($(this)[0].innerHTML); 
       }); 
       var hash = window.location.hash; 
       $('a').on('click', function(){ 
        if(!hash && !($(this).attr('target'))){ 
         $('[id="'+$(this).attr('href').substring(1)+'"]').show('slow'); 
        } 
       }); 
       setTimeout(function(){ 
        $('[id="'+hash.substring(1)+'"]').show('slow'); 
       }, 100); 
       $('body').append("<div id='foo' style='background-color:#8F8;'>FOO</div>"); 
      }); 
     </script>  
    </head> 
    <body> 
     <a href="#foo" target="_blank">foo (blank)</a> 
     <a href="#bar" target="_blank">bar (blank)</a> 
     <a href="#bar">bar</a> 
    </body> 
</html>

bar.html bleibt gleich

Quelle

2016-05-24 18:30:27 jakob

Die Frage wurde aktualisiert, um das Laden mehrerer Dateien zu ermöglichen. Antwort sieht zu kompliziert aus, meine eigene Lösung einreichend. – alex

CSS + Anker Link zu dynamisch geladenen Element aus Datei mit jQuery funktioniert nicht

Antwort

Verwandte Themen