动态添加元素添加目标

我是jQuery的新手，现在我陷入了一段时间的问题。我试图发现所有到外部页面的链接，并为它们添加一个target =“_ blank”属性。到目前为止，我已经创建了下面的脚本：动态添加元素添加目标

这正常上加载的页面上一审的元素，但是当新的元素被动态地添加它不会再次触发添加目标属性。我试图将“就绪”功能更改为“开启（'加载'）”，但没有成功。

任何帮助非常感谢，我很感激那些花时间回答这些愚蠢问题的人。

编辑：我创建并通过AJAX调用加载更多元素的无限滚动脚本。这些元素包含“a”标签，我希望脚本能够为他们再次运行。

2017-05-31 Mipod

你是什么意思的是ADDE元素动态地？你如何添加这些？当文档准备就绪或加载时，加载和就绪函数都会运行一次，因此您的函数只能运行到第一次加载到DOM的元素。如果以某种方式你可以通过Jquery或JS添加新的链接，你需要再次添加属性空白。从这个意义上来说更明确，我想我可以正确回答。 – DanielPanic

最好的解决方案将是*突变观察者* https://stackoverflow.com/questions/13277212/mutation-observer-for-creating-new-elements –

我想包在一个函数你的链接，更改代码，你可以调用a）onload和b）当你的内容改变时。

$(document).ready(function() { 
    linkChanger(); 
}); 

function linkChanger() { 
    $('a').each(function() { 
     if (location.hostname !== this.hostname) { 
      $(this).attr('target', '_blank'); 
     } 
    }); 
}

那么如果以后添加内容/链接，你可以调用linkChanger（）来检查/再次转换你的页面：

$('#something').click(function() { 
    // code that gets more content, if async provide a callback that calls linkChanger() 
    linkChanger(); 
});

来源

2017-05-31 18:51:55 James

我试过“on（'load'）”，但似乎是在加载元素之前触发，因为它不会影响任何“a”标记 – Mipod

我将“on（'load'）”更改为“ready”，并在加载新元素后将该函数添加到无限滚动脚本中它的工作。非常感谢 – Mipod

是的，它应该已经'.ready'更新了答案。 – James

无论何时添加新元素，您都必须触发该功能。因为您是知道何时添加新链接的最佳人选，所以您必须以这种方式设置脚本。

function setTargetBlank() { 
    $('a').each(function() { 
    if (location.hostname !== this.hostname) { 
     $(this).attr('target', '_blank'); 
    } 
    }); 
} 

// On load 
$(function() { 
    setTargetBlank(); 
    loadSomeContent(function() { 
    // And after it is loaded, trigger again the function 
    setTargetBlank(); 
    }); 
});

如果你无法控制这些，你可以简单地设置一个计时器，将始终触发每隔几秒钟即功能：

// This is not really good for performance, but it will work 
// It will trigger the function every 3 seconds 
setInterval(setTargetBlank, 3 * 1000);

来源

2017-05-31 18:51:51

很可能是因为您之前的新的针对A链接元素已创建，请尝试在setTimeout函数中运行代码。例如

$(document).on('load',function() {

setTimeout(function(){ $('a').each(function() { if (location.hostname !== this.hostname) { $(this).attr('target', '_blank');
} }); }, 5000);

});

来源

2017-05-31 19:03:16

动态添加元素添加目标

回答

相关问题