CSS + привязка к динамически загружаемому элементу из файла с использованием jQuery не работает

Мне нужно иметь возможность показывать только привязанный div и иметь возможность разделить ссылку с этим якорем. Он работает не так, как ожидалось (попробуйте bar1 (blank)bar2 (blank) ссылка). Загрузка страницы main.html (показано ниже) с привязкой bar1 или bar2 (www.foo.bar/main.html#bar1) не может должным образом обрабатывать css и jQuery, если bar1 (или bar2) загружается из файла. С другой стороны, если элемент #foo добавлен как строка html, то привязанная ссылка, похоже, работает (например, www.foo.bar/main.html#foo). Для сравнения поведение нажмите foo (blank), bar1 (blank), bar1, bar2 (blank) и bar2 ссылки, bar1 (blank) и bar2 (blank) ссылки не показывают bar1 (или bar2) DIV. По-видимому, это связано с асинхронной загрузкой файлов. Есть ли способ обойти эту проблему?CSS + привязка к динамически загружаемому элементу из файла с использованием jQuery не работает

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>

источник

2016-05-24 alex

Добавлен счетчик файлов и функцию, уменьшает счетчик для сброса метки привязки.

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>

источник

2016-05-25 11:46:14 alex

Не уверен, что ваша полная я пытаюсь сделать.

Но попробуйте упаковка ваш Jquery в документе готовый

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

источник

2016-05-24 13:15:59 Mark

Это не поможет. Мне нужно иметь возможность показывать только привязанный div и иметь возможность разделить ссылку с этим якорем. В этом примере я ожидаю после нажатия «bar (blank)» для открытой страницы, чтобы показать «BAR», это не так. – alex

Вы могли бы сделать что-то подобное для 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 остается прежним

источник

2016-05-24 18:30:27 jakob

Обновлен вопрос, чтобы включить загрузку нескольких файлов. Ответ выглядит слишком сложно, представляя мое собственное решение. – alex

CSS + привязка к динамически загружаемому элементу из файла с использованием jQuery не работает

ответ

Смежные вопросы