CSS + Anchor link to dynamically loaded element from file using jQuery does not work

问题

I need to be able to show only anchored div and to be able to share the link with that anchor. It is not working as expected (try bar1 (blank) bar2 (blank) link). Loading main.html page (shown below) with an anchor bar1 or bar2 (www.foo.bar/main.html#bar1) fails to properly handle css and jQuery if bar1 (or bar2) is loaded from file. On the other hand if #foo element is appended as html string then anchored link seems to work (e.g. www.foo.bar/main.html#foo). To compare behavior click foo (blank), bar1 (blank), bar1, bar2 (blank) and bar2 links, bar1 (blank) and bar2 (blank) links fail to show bar1 (or bar2) div. Apparently it is related to asynchronous file loading. Is there a way to get around this issue?

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>

回答1:

Not sure what your fully trying to do.

But try wrapping your jQuery in document ready

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

回答2:

You could do something like this for 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 stays the same

回答3:

Added a file counter and a function that decrements counter to reset the anchor tag.

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>

来源：https://stackoverflow.com/questions/37413184/css-anchor-link-to-dynamically-loaded-element-from-file-using-jquery-does-not

标签

javascript

jquery

html

css

anchor