代码不会动态更新自身

Code not dynamically updating itself

本文关键字：更新 动态 代码      更新时间：2023-09-26
<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添加到"输出"div中的所有链接中，并且仅添加该div（不起作用）然后，如果我单击一个链接，它会更新"输出"div，而不是实际导航到该链接。

一种解决方案是绕过更改<a>元素而只捕获点击。由于您正在处理动态创建的元素，因此使用事件委派可能会更容易：

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>

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

相关文章：