Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">

    $.getJSON('http://anyorigin.com/get?url=microsoftwebpro.com&callback=?', 
    function(data){
       $('#output').html(data.contents);
       $('a').each(function() {
            $(this).attr('href', 'http://anyorigin.com/get?url='+$(this).attr('href')+'&callback=?');
       });
   });

   $('a').click(function() {

     $.getJSON($(this).attr('href'), function(data) {
       $('#output').html(data.contents);
     });
  });

但我似乎无法弄清楚为什么它没有以正确的顺序加载。因此，例如，我希望它从另一个域加载内容，然后将一个添加过滤器href添加到＆＃34;输出＆＃34;中的所有链接。 div和只有那个div（不工作）然后，如果我点击链接，它会更新＆＃34;输出＆＃34; div而不是实际导航到链接。

Answer 1

一种解决方案是绕过更改<a>元素并捕获点击次数。由于您正在处理动态创建的元素，因此使用Event Delegation：

可能会更容易

function AnyOriginURL(url) {
  return 'http://anyorigin.com/get?url='+url+'&callback=?';
}

function Navigate(url) {
  $.getJSON(AnyOriginURL(url), function(data){
    $('#output').html(data.contents);
  });
}

// When clicking any <a> inside the #output...
$("#output").on("click", "a", function(e) {
  // Prevent click from triggering navigation
  e.preventDefault();

  // And Navigate there using our method
  Navigate($(this).attr("href"));
});

// Onload, start at this base page
$(function() {
  Navigate("microsoftwebpro.com");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

注意：使用此示例时，网站加载速度非常慢

代码不会动态更新自身

1 个答案: