无法在 head 标签中动态添加 运行 javascript 文件
not able to run javascript file added dynamically in head tag
调用脚本代码如下（head 标签中的第二个脚本）。这个脚本（callscripts）有其他代码在头文件中动态添加JS脚本，这是行不通的。
所以基本上每当我点击一个导航栏项目时，特定的 javascript 应该 运行（这并没有发生），这样加载时间就会减少。
$(document).ready(function() {
$(".navbar-nav").on('click', '.nav-item', function(ev1) {
console.log("workingtech");
console.log(ev1.target);
if ($(ev1.target).is("#techpagelink")) { //If this target is clicked the below script should be added to head and be executed.
var $techscript = $("<script>").attr({
"type": 'text/javascript',
src: '/js/flikfeedtech.js'
});
$('head').prepend($techscript);
} else if ($(ev1.target).is("#politicspagelink")) { //If this target is clicked the below script should be added to head and be executed.
var $politicsscript = $("<script>").attr({
"type": 'text/javascript',
src: '/js/flikfeedpoliticsjs.js'
});
$('head').prepend($politicsscript);
} else if ($(ev1.target).is("#movtvpagelink")) { //If this target is clicked the below script should be added to head and be executed.
var $moviesscript = $("<script>").attr({
"type": 'text/javascript',
src: '/js/flikfeedmoviesjs.js'
});
$('head').prepend($moviesscript);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script async type="text/javascript" src="/js/flikfeedjs.js"></script>
<!-- this script(callscripts) has other code to add JS script dynamically in head file, which is not working. -->
<script async type="text/javascript" src="/js/callscripts.js"></script>
<body>
<div class="navbar-nav">
<a href="#foryoupage" class="nav-item nav-link active" id="#foryoupagelink">For You</a>
<div></div>
<a href="#techpage" class="nav-item nav-link hello " id="#techpagelink">Technology</a>
<div></div>
<a href="#politicspage" class="nav-item nav-link hello" id="#politicspagelink">Politics</a>
<div></div>
<a href="#movtvpage" class="nav-item nav-link hello" id="#movtvpagelink">Movies/Tv shows</a>
</div>
</body>
flikfeedpoliticsjs.js代码
$(document).ready(function() {
$.ajax({
type: "GET",
url: "https://cors-anywhere.herokuapp.com/https://www.asianage.com/rss_feed/?subsectionId=105",
datatype: "xml",
success: function(xml) {
//console.log(xml);
$(xml).find('item').each(function(i, j) {
title = $(j).find('title').text();
link = $(j).find('link').text();
description = $(j).find('description').text();
thumbnail = "/images/asianagethumb.jpg";
newsname = "The Asian Age";
logo = "https://www.asianage.com/images/logo.png";
articlestech(i, title, description, link, thumbnail, newsname, logo);
});
}
});
function articlestech(i, title, description, link, thumbnail, newsname, logo) {
var $divitem = $("<div>").attr('class', 'item grid-group-item col-xs-4 col-lg-4 col-md-6 col-sm-12');
/* console.log("news18");
console.log(thumbnail);
console.log(typeof(thumbnail)); */
var $divthumb = $("<div>").attr({
"class": 'thumbnail card',
style: 'border: 1px solid transparent'
}),
$divcardheader = $("<div>").attr({
"class": 'card-header bg-transparent d-flex justify-content-start',
style: 'border: 1px solid transparent'
}),
$divp21 = $("<div>").attr('class', 'p-2'),
$imgthumb = $("<img>").attr({
"class": 'img-thumbnail ',
'style': 'align-content: center',
'src': logo,
'width': "35",
'height': "35"
}),
$divp22 = $("<div>").attr('class', 'p-2'),
$pnewsname = $("<p>").text(newsname),
$divmrauto = $("<div>").attr('class', 'mr-auto p-2'),
$button = $("<button>").attr({
id: "tnie",
class: "follow-button"
}).text("+Follow"),
$divimg = $("<div>").attr('class', 'img-event');
if (newsname == "CineJosh") {
var $imggrp = $("<img>").attr({
"class": 'group list-group-image img-fluid img-thumbnail',
src: thumbnail,
width: "254",
height: "212"
});
} else {
var $imggrp = $("<img>").attr({
"class": 'group list-group-image img-fluid img-thumbnail',
src: thumbnail
});
}
var $divcaption = $("<div>").attr('class', 'caption card-body'),
$headcard = $("<h4>").text(title).attr('class', 'group card-title inner list-group-item-heading'),
$paracard = $("<p>").attr('class', 'group inner list-group-item-text').text(description);
var $divflex = $("<div>").attr('class', 'd-flex justify-content-end'),
$divtime = $("<div>").attr({
"class": 'mr-auto p-2',
'id': 'time'
}),
$small = $("<small>").attr('class', 'text-muted').text('3 mins ago'),
$divsvg = $("<div>").attr({
'class': 'p-2',
'id': 'svgs'
}),
$svgcapa_1 = makeSVG('svg', {
'version': '1.1',
'id': "Capa_1",
'xmlns:xlink': "http://www.w3.org/1999/xlink",
'width': "24",
'height': "24",
'x': "0px",
'y': "0px",
'viewBox': "0 0 512 512",
'style': "enable-background:new 0 0 512 512;",
'xml:space': "preserve"
}),
$g1 = makeSVG('g', {
'id': 'g1'
}),
$g1path = makeSVG('g', {
'id': 'g1path'
}),
$path1 = makeSVG('path', {
'd': 'M346,0c-5.522,0-10,4.478-10,10v46c0,5.522,4.478,10,10,10c5.522,0,10-4.478,10-10V10C356,4.478,351.522,0,346,0z'
}),
$g2 = makeSVG('g', {
'id': 'g2'
}),
$g2path = makeSVG('g', {
'id': 'g2path'
}),
$path2 = makeSVG('path', {
'd': 'M116,312c-5.52,0-10,4.48-10,10c0,5.52,4.48,10,10,10s10-4.48,10-10C124,316.48,121.52,312,116,312z'
}),
$g3 = makeSVG('g', {
'id': 'g3'
}),
$g3path = makeSVG('g', {
'id': 'g3path'
}),
$path3 = makeSVG('path', {
'd': 'M486,292c0-22.056-17.944-40-40-40h-74.652c11.557-29.603,16.235-64.447,15.333-95.464c-0.172-5.919-0.399-9.342-0.706-11.497C385.458,123.432,367.716,106,346,106c-22.056,0-40,17.944-40,40v10c0,63.246-81.214,98.781-142.504,114.019C158.862,259.425,148.284,252,136,252H36c-5.522,0-10,4.478-10,10v240c0,5.522,4.478,10,10,10h100c12.202,0,22.719-7.327,27.401-17.809c5.075,1.302,9.786,2.532,14.135,3.668C212.451,506.978,231.684,512,278.46,512H386c22.056,0,40-17.944,40-40c0-8.224-2.497-15.874-6.77-22.238C434.678,444.359,446,429.599,446,412c0-8.194-2.436-15.869-6.696-22.242C454.684,384.324,466,369.6,466,352c0-8.224-2.497-15.874-6.77-22.238C474.678,324.359,486,309.599,486,292z M146,482c0,5.514-4.486,10-10,10H46V272h90c5.514,0,10,4.486,10,10V482z M446,312c-21.449,0-24.562,0-50,0c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h30c11.028,0,20,8.972,20,20c0,11.046-8.954,20-20,20h-50c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h30c10.897,0,20,8.705,20,20c0,11.046-8.954,20-20,20c-21.449,0-24.562,0-50,0c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h30c11.028,0,20,8.972,20,20s-8.972,20-20,20H278.46c-44.207,0-61.473-4.509-95.87-13.492c-5.039-1.316-10.566-2.759-16.59-4.295V290.025C238.368,272.787,324,230.711,324,156v-10c0-11.028,8.972-20,20-20c11.008,0,19.979,8.958,20,19.969V146c0,4.346,5.424,57.683-16.324,106H316c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10c6.983,0,118.602,0,130,0c11.028,0,20,8.972,20,20C466,303.046,457.046,312,446,312z'
}),
$g4 = makeSVG('g', {
'id': 'g4'
}),
$g4path = makeSVG('g', {
'id': 'g4path'
}),
$path4 = makeSVG('path', {
'd': 'M116,352c-5.522,0-10,4.478-10,10v80c0,5.522,4.478,10,10,10c5.522,0,10-4.478,10-10v-80C124,356.478,121.522,352,116,352z'
}),
$g5 = makeSVG('g', {
'id': 'g5'
}),
$g5path = makeSVG('g', {
'id': 'g5path'
}),
$path5 = makeSVG('path', {
'd': 'M246,124h-40c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h40c5.522,0,10-4.478,10-10C276,130.478,271.522,124,246,124z'
}),
$g6 = makeSVG('g', {
'id': 'g6'
}),
$g6path = makeSVG('g', {
'id': 'g6path'
}),
$path6 = makeSVG('path', {
'd': 'M466,124h-40c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h40c5.522,0,10-4.478,10-10C476,130.478,471.522,124,466,124z'
}),
$g7 = makeSVG('g', {
'id': 'g7'
}),
$g7path = makeSVG('g', {
'id': 'g7path'
}),
$path7 = makeSVG('path', {
'd': 'M437.921,44.079c-3.906-3.904-10.236-3.904-14.143,0l-28.279,28.279c-3.905,3.905-3.905,10.237,0,14.143c3.907,3.905,10.236,3.904,14.143,0l28.279-28.279C441.824,54.317,441.824,47.985,437.921,44.079z'
}),
$g8 = makeSVG('g', {
'id': 'g8'
}),
$g8path = makeSVG('g', {
'id': 'g8path'
}),
$path8 = makeSVG('path', {
'd': 'M296.501,72.358l-28.279-28.279c-3.906-3.904-10.236-3.904-14.143,0c-3.905,3.905-3.905,10.237,0,14.143l28.279,28.279c3.908,3.905,10.237,3.904,14.143,0C300.406,82.596,300.406,76.244,296.501,72.358z'
}),
$divsapce1 = $("<div>").attr({
'class': 'p-2',
id: 'space1'
}),
$svgCapa2 = makeSVG('svg', {
'enable-background': "new 0 0 512.54 512.54",
'height': "24",
'viewBox': "0 0 512.54 512.54",
'width': "24",
'xmlns': "http://www.w3.org/2000/svg",
'id': 'Capa2'
}),
$pathcapa20 = makeSVG('path', {
'd': 'm450.27 379.542h-29.536v-30.009c0-5.523-4.477-10-10-10s-10 4.477-10 10v30.009h-29.536c-5.523 0-10 4.477-10 10s4.477 10 10 10h29.536v30.009c0 5.523 4.477 10 10 10s10-4.477 10-10v-30.009h29.536c5.523 0 10-4.477 10-10s-4.477-10-10-10z'
}),
$pathcapa21 = makeSVG('path', {
'd': 'm482.151 318.124c-19.077-19.077-44.44-29.583-71.418-29.583-13.63 0-24.847 2.686-39.05 7.799v-176.7c0-7.314-2.848-14.191-8.019-19.361l-92.25-92.241c-2.159-2.159-4.673-3.922-7.399-5.244-.003-.002-.007-.003-.01-.005-.128-.062-.256-.125-.385-.186-.238-.116-.479-.224-.727-.321-3.407-1.469-7.106-2.242-10.849-2.242h-222.25c-15.958 0-28.94 12.982-28.94 28.94v454.66c0 15.958 12.982 28.94 28.94 28.94h312.95c15.279 0 27.97-11.946 28.892-27.197.012-.201.018-.402.018-.603v-2.072c12.467 5.213 25.772 7.824 39.08 7.824 25.864 0 51.728-9.845 71.418-29.535 39.379-39.379 39.379-103.456-.001-142.835zm-144.609-215.685h-66.082c-1.22 0-2.212-.993-2.212-2.213v-66.089zm14.111 381.944c-.404 4.594-4.271 8.157-8.91 8.157h-312.949c-4.93 0-8.94-4.01-8.94-8.94v-454.66c0-4.93 4.01-8.94 8.94-8.94h219.454v80.224c0 12.248 9.964 22.213 22.212 22.213h80.224v185.143c-4.355 3.151-8.493 6.666-12.368 10.541-39.38 39.38-39.38 103.456 0 142.836 3.887 3.887 8.017 7.384 12.338 10.503v12.921zm116.356-37.566c-31.581 31.582-82.97 31.582-114.551 0-31.582-31.582-31.582-82.969 0-114.551 15.299-15.299 35.64-23.724 57.275-23.724s41.977 8.425 57.275 23.724c31.583 31.582 31.583 82.969.001 114.551z'
}),
$pathcapa22 = makeSVG('path', {
'd': 'm71.32 159.38h139.414c5.523 0 10-4.477 10-10s-4.477-10-10-10h-139.414c-5.523 0-10 4.477-10 10s4.477 10 10 10z'
}),
$pathcapa23 = makeSVG('path', {
'd': 'm245.505 319.298h-174.185c-5.523 0-10 4.477-10 10s4.477 10 10 10h174.185c5.523 0 10-4.477 10-10s-4.477-10-10-10z'
}),
$pathcapa24 = makeSVG('path', {
'd': 'm245.505 379.271h-174.185c-5.523 0-10 4.477-10 10s4.477 10 10 10h174.185c5.523 0 10-4.477 10-10s-4.477-10-10-10z'
}),
$pathcapa25 = makeSVG('path', {
'd': 'm301.734 259.324h-230.414c-5.523 0-10 4.477-10 10s4.477 10 10 10h230.414c5.523 0 10-4.477 10-10s-4.478-10-10-10z'
}),
$pathcapa26 = makeSVG('path', {
'd': 'm70.32 220h180.414c5.523 0 10-4.477 10-10s-4.477-10-10-10h-180.414c-5.523 0-10 4.477-10 10s4.477 10 10 10z'
}),
$circle = makeSVG('circle', {
cx: "300.5",
cy: "210",
r: "10.005"
}),
$divspace2 = $("<div>").attr({
'id': "space2",
'class': "p-2"
}),
$svgCapa3 = makeSVG('svg', {
'id': "Capa3",
'xmlns': "http://www.w3.org/2000/svg",
'xmlns:xlink': "http://www.w3.org/1999/xlink",
'version': "1.1",
'x': "0px",
'y': "0px",
'viewBox': "0 0 58 58",
'style': "enable-background:new 0 0 58 58;",
'xml:space': "preserve",
'width': "24",
'height': "24"
}),
$gcapa1 = makeSVG('g', {
'id': 'gcapa1'
}),
$gcapapath = makeSVG('g', {
'id': 'gcapapath'
}),
$pathxy1 = makeSVG('path', {
'd': 'M54.319,37.839C54.762,35.918,55,33.96,55,32c0-9.095-4.631-17.377-12.389-22.153c-0.473-0.29-1.087-0.143-1.376,0.327 c-0.29,0.471-0.143,1.086,0.327,1.376C48.724,15.96,53,23.604,53,32c0,1.724-0.2,3.451-0.573,5.147C51.966,37.051,51.489,37,51,37 c-3.86,0-7,3.141-7,7s3.14,7,7,7s7-3.141,7-7C58,41.341,56.509,39.024,54.319,37.839z M51,49c-2.757,0-5-2.243-5-5s2.243-5,5-5 s5,2.243,5,5S53.757,49,51,49z',
'data-original': '#000000',
'class': "active-path",
'data-old_color': "#000000",
'fill': "#151313"
}),
$pathxy2 = makeSVG('path', {
'd': 'M38.171,54.182C35.256,55.388,32.171,56,29,56c-6.385,0-12.527-2.575-17.017-7.092C13.229,47.643,14,45.911,14,44 c0-3.859-3.14-7-7-7s-7,3.141-7,7s3.14,7,7,7c1.224,0,2.378-0.319,3.381-0.875C15.24,55.136,21.994,58,29,58 c3.435,0,6.778-0.663,9.936-1.971c0.51-0.211,0.753-0.796,0.542-1.307C39.247,54.213,38.681,53.971,38.171,54.182z M2,44 c0-2.757,2.243-5,5-5s5,2.243,5,5s-2.243,5-5,5S2,46.757,2,44z',
'data-original': "#000000",
'class': "active-path",
'data-old_color': "#000000",
'fill': "#151313"
}),
$pathxy3 = makeSVG('path', {
'd': 'M4,31.213c0.024,0.002,0.048,0.003,0.071,0.003c0.521,0,0.959-0.402,0.997-0.93c0.712-10.089,7.586-18.52,17.22-21.314 C23.142,11.874,25.825,14,29,14c3.86,0,7-3.141,7-7s-3.14-7-7-7c-3.851,0-6.985,3.127-6.999,6.975 C11.42,9.922,3.851,19.12,3.073,30.146C3.034,30.696,3.449,31.175,4,31.213z M29,2c2.757,0,5,2.243,5,5s-2.243,5-5,5s-5-2.243-5-5 S24.243,2,29,2z',
'data-original': "#000000",
'class': "active-path",
'data-old_color': "#000000",
'fill': "#151313"
});
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return $(el);
}
$imglinktag1 = $("<a>").attr({
'href': link,
'style': 'text-decoration:none',
'target': '_blank'
}),
$imglinktag2 = $("<a>").attr({
'href': link,
'style': 'text-decoration:none',
'target': '_blank'
});
// $("#rowview").append($divitem.append($divthumb.append([$divimg.append($imggrp), $divcaption.append([$headcard, $paracard, $divrow.append([$divfooter1.append($lead), $divfooter2.append($atag)])])])));
if (i < 3) {
$("#politicsrowviewtop").append($divitem.append($divthumb.append([$divcardheader.append([$divp21.append($imgthumb), $divp22.append($pnewsname), $divmrauto.append($button)]), $imglinktag1.append($divimg.append($imggrp)), $divcaption.append([$imglinktag2.append($headcard), $imglinktag2.append($paracard), $divflex.append([$divtime.append($small), $divsvg.append($svgcapa_1.append([$g1.append($g1path.append($path1)), $g2.append($g2path.append($path2)), $g3.append($g3path.append($path3)), $g4.append($g4path.append($path4)), $g5.append($g5path.append($path5)), $g6.append($g6path.append($path6)), $g7.append($g7path.append($path7)), $g8.append($g8path.append($path8))])), $divsapce1.append($svgCapa2.append([$pathcapa20, $pathcapa21, $pathcapa22, $pathcapa23, $pathcapa24, $pathcapa25, $pathcapa26, $circle])), $divspace2.append($svgCapa3.append($gcapa1.append($gcapapath.append([$pathxy1, $pathxy2, $pathxy3]))))])])])));
} else {
$("#politicsrowview").append($divitem.append($divthumb.append([$divcardheader.append([$divp21.append($imgthumb), $divp22.append($pnewsname), $divmrauto.append($button)]), $imglinktag1.append($divimg.append($imggrp)), $divcaption.append([$imglinktag2.append($headcard), $imglinktag2.append($paracard), $divflex.append([$divtime.append($small), $divsvg.append($svgcapa_1.append([$g1.append($g1path.append($path1)), $g2.append($g2path.append($path2)), $g3.append($g3path.append($path3)), $g4.append($g4path.append($path4)), $g5.append($g5path.append($path5)), $g6.append($g6path.append($path6)), $g7.append($g7path.append($path7)), $g8.append($g8path.append($path8))])), $divsapce1.append($svgCapa2.append([$pathcapa20, $pathcapa21, $pathcapa22, $pathcapa23, $pathcapa24, $pathcapa25, $pathcapa26, $circle])), $divspace2.append($svgCapa3.append($gcapa1.append($gcapapath.append([$pathxy1, $pathxy2, $pathxy3]))))])])])));
}
shuffle();
}
});
由于您使用的是 jquery，因此您可以使用 getScript() 函数：https://api.jquery.com/jQuery.getScript
更新：我 运行 你的代码，当你达到第一个条件时它看起来像失败了：if ($(ev1.target).is("#foryoupage")) {
你的所有条件 return false，所以我会调查一下。
你的错误是你的 ID 属性中有一个 # 所以你所有的 .is() 都失败了
无论如何，您对事件目标的使用是可疑且不必要的
这应该会更好
我还会从加载的脚本中删除 $(document).ready(function(){ })
$(function() {
$(".navbar-nav").on('click', '.nav-item', function() {
var $techscript = $("<script>",{
"type": 'text/javascript',
src: '/js/' + $(this).data("js")
});
console.log($techscript.attr("src"))
$('head').prepend($techscript)
})
$("[href='#foryoupage']").click(); // load the first links onload
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="navbar-nav">
<a href="#foryoupage" class="nav-item nav-link active" data-js="flikfeedjs.js">For You</a>
<div></div>
<a href="#techpage" class="nav-item nav-link hello " data-js="flikfeedtech.js">Technology</a>
<div></div>
<a href="#politicspage" class="nav-item nav-link hello" data-js="flikfeedpoliticsjs.js">Politics</a>
<div></div>
<a href="#movtvpage" class="nav-item nav-link hello" data-js="flikfeedmoviesjs">Movies/Tv shows</a>
</div>
</body>
调用脚本代码如下（head 标签中的第二个脚本）。这个脚本（callscripts）有其他代码在头文件中动态添加JS脚本，这是行不通的。
所以基本上每当我点击一个导航栏项目时，特定的 javascript 应该 运行（这并没有发生），这样加载时间就会减少。
$(document).ready(function() {
$(".navbar-nav").on('click', '.nav-item', function(ev1) {
console.log("workingtech");
console.log(ev1.target);
if ($(ev1.target).is("#techpagelink")) { //If this target is clicked the below script should be added to head and be executed.
var $techscript = $("<script>").attr({
"type": 'text/javascript',
src: '/js/flikfeedtech.js'
});
$('head').prepend($techscript);
} else if ($(ev1.target).is("#politicspagelink")) { //If this target is clicked the below script should be added to head and be executed.
var $politicsscript = $("<script>").attr({
"type": 'text/javascript',
src: '/js/flikfeedpoliticsjs.js'
});
$('head').prepend($politicsscript);
} else if ($(ev1.target).is("#movtvpagelink")) { //If this target is clicked the below script should be added to head and be executed.
var $moviesscript = $("<script>").attr({
"type": 'text/javascript',
src: '/js/flikfeedmoviesjs.js'
});
$('head').prepend($moviesscript);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script async type="text/javascript" src="/js/flikfeedjs.js"></script>
<!-- this script(callscripts) has other code to add JS script dynamically in head file, which is not working. -->
<script async type="text/javascript" src="/js/callscripts.js"></script>
<body>
<div class="navbar-nav">
<a href="#foryoupage" class="nav-item nav-link active" id="#foryoupagelink">For You</a>
<div></div>
<a href="#techpage" class="nav-item nav-link hello " id="#techpagelink">Technology</a>
<div></div>
<a href="#politicspage" class="nav-item nav-link hello" id="#politicspagelink">Politics</a>
<div></div>
<a href="#movtvpage" class="nav-item nav-link hello" id="#movtvpagelink">Movies/Tv shows</a>
</div>
</body>
flikfeedpoliticsjs.js代码
$(document).ready(function() {
$.ajax({
type: "GET",
url: "https://cors-anywhere.herokuapp.com/https://www.asianage.com/rss_feed/?subsectionId=105",
datatype: "xml",
success: function(xml) {
//console.log(xml);
$(xml).find('item').each(function(i, j) {
title = $(j).find('title').text();
link = $(j).find('link').text();
description = $(j).find('description').text();
thumbnail = "/images/asianagethumb.jpg";
newsname = "The Asian Age";
logo = "https://www.asianage.com/images/logo.png";
articlestech(i, title, description, link, thumbnail, newsname, logo);
});
}
});
function articlestech(i, title, description, link, thumbnail, newsname, logo) {
var $divitem = $("<div>").attr('class', 'item grid-group-item col-xs-4 col-lg-4 col-md-6 col-sm-12');
/* console.log("news18");
console.log(thumbnail);
console.log(typeof(thumbnail)); */
var $divthumb = $("<div>").attr({
"class": 'thumbnail card',
style: 'border: 1px solid transparent'
}),
$divcardheader = $("<div>").attr({
"class": 'card-header bg-transparent d-flex justify-content-start',
style: 'border: 1px solid transparent'
}),
$divp21 = $("<div>").attr('class', 'p-2'),
$imgthumb = $("<img>").attr({
"class": 'img-thumbnail ',
'style': 'align-content: center',
'src': logo,
'width': "35",
'height': "35"
}),
$divp22 = $("<div>").attr('class', 'p-2'),
$pnewsname = $("<p>").text(newsname),
$divmrauto = $("<div>").attr('class', 'mr-auto p-2'),
$button = $("<button>").attr({
id: "tnie",
class: "follow-button"
}).text("+Follow"),
$divimg = $("<div>").attr('class', 'img-event');
if (newsname == "CineJosh") {
var $imggrp = $("<img>").attr({
"class": 'group list-group-image img-fluid img-thumbnail',
src: thumbnail,
width: "254",
height: "212"
});
} else {
var $imggrp = $("<img>").attr({
"class": 'group list-group-image img-fluid img-thumbnail',
src: thumbnail
});
}
var $divcaption = $("<div>").attr('class', 'caption card-body'),
$headcard = $("<h4>").text(title).attr('class', 'group card-title inner list-group-item-heading'),
$paracard = $("<p>").attr('class', 'group inner list-group-item-text').text(description);
var $divflex = $("<div>").attr('class', 'd-flex justify-content-end'),
$divtime = $("<div>").attr({
"class": 'mr-auto p-2',
'id': 'time'
}),
$small = $("<small>").attr('class', 'text-muted').text('3 mins ago'),
$divsvg = $("<div>").attr({
'class': 'p-2',
'id': 'svgs'
}),
$svgcapa_1 = makeSVG('svg', {
'version': '1.1',
'id': "Capa_1",
'xmlns:xlink': "http://www.w3.org/1999/xlink",
'width': "24",
'height': "24",
'x': "0px",
'y': "0px",
'viewBox': "0 0 512 512",
'style': "enable-background:new 0 0 512 512;",
'xml:space': "preserve"
}),
$g1 = makeSVG('g', {
'id': 'g1'
}),
$g1path = makeSVG('g', {
'id': 'g1path'
}),
$path1 = makeSVG('path', {
'd': 'M346,0c-5.522,0-10,4.478-10,10v46c0,5.522,4.478,10,10,10c5.522,0,10-4.478,10-10V10C356,4.478,351.522,0,346,0z'
}),
$g2 = makeSVG('g', {
'id': 'g2'
}),
$g2path = makeSVG('g', {
'id': 'g2path'
}),
$path2 = makeSVG('path', {
'd': 'M116,312c-5.52,0-10,4.48-10,10c0,5.52,4.48,10,10,10s10-4.48,10-10C124,316.48,121.52,312,116,312z'
}),
$g3 = makeSVG('g', {
'id': 'g3'
}),
$g3path = makeSVG('g', {
'id': 'g3path'
}),
$path3 = makeSVG('path', {
'd': 'M486,292c0-22.056-17.944-40-40-40h-74.652c11.557-29.603,16.235-64.447,15.333-95.464c-0.172-5.919-0.399-9.342-0.706-11.497C385.458,123.432,367.716,106,346,106c-22.056,0-40,17.944-40,40v10c0,63.246-81.214,98.781-142.504,114.019C158.862,259.425,148.284,252,136,252H36c-5.522,0-10,4.478-10,10v240c0,5.522,4.478,10,10,10h100c12.202,0,22.719-7.327,27.401-17.809c5.075,1.302,9.786,2.532,14.135,3.668C212.451,506.978,231.684,512,278.46,512H386c22.056,0,40-17.944,40-40c0-8.224-2.497-15.874-6.77-22.238C434.678,444.359,446,429.599,446,412c0-8.194-2.436-15.869-6.696-22.242C454.684,384.324,466,369.6,466,352c0-8.224-2.497-15.874-6.77-22.238C474.678,324.359,486,309.599,486,292z M146,482c0,5.514-4.486,10-10,10H46V272h90c5.514,0,10,4.486,10,10V482z M446,312c-21.449,0-24.562,0-50,0c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h30c11.028,0,20,8.972,20,20c0,11.046-8.954,20-20,20h-50c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h30c10.897,0,20,8.705,20,20c0,11.046-8.954,20-20,20c-21.449,0-24.562,0-50,0c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h30c11.028,0,20,8.972,20,20s-8.972,20-20,20H278.46c-44.207,0-61.473-4.509-95.87-13.492c-5.039-1.316-10.566-2.759-16.59-4.295V290.025C238.368,272.787,324,230.711,324,156v-10c0-11.028,8.972-20,20-20c11.008,0,19.979,8.958,20,19.969V146c0,4.346,5.424,57.683-16.324,106H316c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10c6.983,0,118.602,0,130,0c11.028,0,20,8.972,20,20C466,303.046,457.046,312,446,312z'
}),
$g4 = makeSVG('g', {
'id': 'g4'
}),
$g4path = makeSVG('g', {
'id': 'g4path'
}),
$path4 = makeSVG('path', {
'd': 'M116,352c-5.522,0-10,4.478-10,10v80c0,5.522,4.478,10,10,10c5.522,0,10-4.478,10-10v-80C124,356.478,121.522,352,116,352z'
}),
$g5 = makeSVG('g', {
'id': 'g5'
}),
$g5path = makeSVG('g', {
'id': 'g5path'
}),
$path5 = makeSVG('path', {
'd': 'M246,124h-40c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h40c5.522,0,10-4.478,10-10C276,130.478,271.522,124,246,124z'
}),
$g6 = makeSVG('g', {
'id': 'g6'
}),
$g6path = makeSVG('g', {
'id': 'g6path'
}),
$path6 = makeSVG('path', {
'd': 'M466,124h-40c-5.522,0-10,4.478-10,10c0,5.522,4.478,10,10,10h40c5.522,0,10-4.478,10-10C476,130.478,471.522,124,466,124z'
}),
$g7 = makeSVG('g', {
'id': 'g7'
}),
$g7path = makeSVG('g', {
'id': 'g7path'
}),
$path7 = makeSVG('path', {
'd': 'M437.921,44.079c-3.906-3.904-10.236-3.904-14.143,0l-28.279,28.279c-3.905,3.905-3.905,10.237,0,14.143c3.907,3.905,10.236,3.904,14.143,0l28.279-28.279C441.824,54.317,441.824,47.985,437.921,44.079z'
}),
$g8 = makeSVG('g', {
'id': 'g8'
}),
$g8path = makeSVG('g', {
'id': 'g8path'
}),
$path8 = makeSVG('path', {
'd': 'M296.501,72.358l-28.279-28.279c-3.906-3.904-10.236-3.904-14.143,0c-3.905,3.905-3.905,10.237,0,14.143l28.279,28.279c3.908,3.905,10.237,3.904,14.143,0C300.406,82.596,300.406,76.244,296.501,72.358z'
}),
$divsapce1 = $("<div>").attr({
'class': 'p-2',
id: 'space1'
}),
$svgCapa2 = makeSVG('svg', {
'enable-background': "new 0 0 512.54 512.54",
'height': "24",
'viewBox': "0 0 512.54 512.54",
'width': "24",
'xmlns': "http://www.w3.org/2000/svg",
'id': 'Capa2'
}),
$pathcapa20 = makeSVG('path', {
'd': 'm450.27 379.542h-29.536v-30.009c0-5.523-4.477-10-10-10s-10 4.477-10 10v30.009h-29.536c-5.523 0-10 4.477-10 10s4.477 10 10 10h29.536v30.009c0 5.523 4.477 10 10 10s10-4.477 10-10v-30.009h29.536c5.523 0 10-4.477 10-10s-4.477-10-10-10z'
}),
$pathcapa21 = makeSVG('path', {
'd': 'm482.151 318.124c-19.077-19.077-44.44-29.583-71.418-29.583-13.63 0-24.847 2.686-39.05 7.799v-176.7c0-7.314-2.848-14.191-8.019-19.361l-92.25-92.241c-2.159-2.159-4.673-3.922-7.399-5.244-.003-.002-.007-.003-.01-.005-.128-.062-.256-.125-.385-.186-.238-.116-.479-.224-.727-.321-3.407-1.469-7.106-2.242-10.849-2.242h-222.25c-15.958 0-28.94 12.982-28.94 28.94v454.66c0 15.958 12.982 28.94 28.94 28.94h312.95c15.279 0 27.97-11.946 28.892-27.197.012-.201.018-.402.018-.603v-2.072c12.467 5.213 25.772 7.824 39.08 7.824 25.864 0 51.728-9.845 71.418-29.535 39.379-39.379 39.379-103.456-.001-142.835zm-144.609-215.685h-66.082c-1.22 0-2.212-.993-2.212-2.213v-66.089zm14.111 381.944c-.404 4.594-4.271 8.157-8.91 8.157h-312.949c-4.93 0-8.94-4.01-8.94-8.94v-454.66c0-4.93 4.01-8.94 8.94-8.94h219.454v80.224c0 12.248 9.964 22.213 22.212 22.213h80.224v185.143c-4.355 3.151-8.493 6.666-12.368 10.541-39.38 39.38-39.38 103.456 0 142.836 3.887 3.887 8.017 7.384 12.338 10.503v12.921zm116.356-37.566c-31.581 31.582-82.97 31.582-114.551 0-31.582-31.582-31.582-82.969 0-114.551 15.299-15.299 35.64-23.724 57.275-23.724s41.977 8.425 57.275 23.724c31.583 31.582 31.583 82.969.001 114.551z'
}),
$pathcapa22 = makeSVG('path', {
'd': 'm71.32 159.38h139.414c5.523 0 10-4.477 10-10s-4.477-10-10-10h-139.414c-5.523 0-10 4.477-10 10s4.477 10 10 10z'
}),
$pathcapa23 = makeSVG('path', {
'd': 'm245.505 319.298h-174.185c-5.523 0-10 4.477-10 10s4.477 10 10 10h174.185c5.523 0 10-4.477 10-10s-4.477-10-10-10z'
}),
$pathcapa24 = makeSVG('path', {
'd': 'm245.505 379.271h-174.185c-5.523 0-10 4.477-10 10s4.477 10 10 10h174.185c5.523 0 10-4.477 10-10s-4.477-10-10-10z'
}),
$pathcapa25 = makeSVG('path', {
'd': 'm301.734 259.324h-230.414c-5.523 0-10 4.477-10 10s4.477 10 10 10h230.414c5.523 0 10-4.477 10-10s-4.478-10-10-10z'
}),
$pathcapa26 = makeSVG('path', {
'd': 'm70.32 220h180.414c5.523 0 10-4.477 10-10s-4.477-10-10-10h-180.414c-5.523 0-10 4.477-10 10s4.477 10 10 10z'
}),
$circle = makeSVG('circle', {
cx: "300.5",
cy: "210",
r: "10.005"
}),
$divspace2 = $("<div>").attr({
'id': "space2",
'class': "p-2"
}),
$svgCapa3 = makeSVG('svg', {
'id': "Capa3",
'xmlns': "http://www.w3.org/2000/svg",
'xmlns:xlink': "http://www.w3.org/1999/xlink",
'version': "1.1",
'x': "0px",
'y': "0px",
'viewBox': "0 0 58 58",
'style': "enable-background:new 0 0 58 58;",
'xml:space': "preserve",
'width': "24",
'height': "24"
}),
$gcapa1 = makeSVG('g', {
'id': 'gcapa1'
}),
$gcapapath = makeSVG('g', {
'id': 'gcapapath'
}),
$pathxy1 = makeSVG('path', {
'd': 'M54.319,37.839C54.762,35.918,55,33.96,55,32c0-9.095-4.631-17.377-12.389-22.153c-0.473-0.29-1.087-0.143-1.376,0.327 c-0.29,0.471-0.143,1.086,0.327,1.376C48.724,15.96,53,23.604,53,32c0,1.724-0.2,3.451-0.573,5.147C51.966,37.051,51.489,37,51,37 c-3.86,0-7,3.141-7,7s3.14,7,7,7s7-3.141,7-7C58,41.341,56.509,39.024,54.319,37.839z M51,49c-2.757,0-5-2.243-5-5s2.243-5,5-5 s5,2.243,5,5S53.757,49,51,49z',
'data-original': '#000000',
'class': "active-path",
'data-old_color': "#000000",
'fill': "#151313"
}),
$pathxy2 = makeSVG('path', {
'd': 'M38.171,54.182C35.256,55.388,32.171,56,29,56c-6.385,0-12.527-2.575-17.017-7.092C13.229,47.643,14,45.911,14,44 c0-3.859-3.14-7-7-7s-7,3.141-7,7s3.14,7,7,7c1.224,0,2.378-0.319,3.381-0.875C15.24,55.136,21.994,58,29,58 c3.435,0,6.778-0.663,9.936-1.971c0.51-0.211,0.753-0.796,0.542-1.307C39.247,54.213,38.681,53.971,38.171,54.182z M2,44 c0-2.757,2.243-5,5-5s5,2.243,5,5s-2.243,5-5,5S2,46.757,2,44z',
'data-original': "#000000",
'class': "active-path",
'data-old_color': "#000000",
'fill': "#151313"
}),
$pathxy3 = makeSVG('path', {
'd': 'M4,31.213c0.024,0.002,0.048,0.003,0.071,0.003c0.521,0,0.959-0.402,0.997-0.93c0.712-10.089,7.586-18.52,17.22-21.314 C23.142,11.874,25.825,14,29,14c3.86,0,7-3.141,7-7s-3.14-7-7-7c-3.851,0-6.985,3.127-6.999,6.975 C11.42,9.922,3.851,19.12,3.073,30.146C3.034,30.696,3.449,31.175,4,31.213z M29,2c2.757,0,5,2.243,5,5s-2.243,5-5,5s-5-2.243-5-5 S24.243,2,29,2z',
'data-original': "#000000",
'class': "active-path",
'data-old_color': "#000000",
'fill': "#151313"
});
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return $(el);
}
$imglinktag1 = $("<a>").attr({
'href': link,
'style': 'text-decoration:none',
'target': '_blank'
}),
$imglinktag2 = $("<a>").attr({
'href': link,
'style': 'text-decoration:none',
'target': '_blank'
});
// $("#rowview").append($divitem.append($divthumb.append([$divimg.append($imggrp), $divcaption.append([$headcard, $paracard, $divrow.append([$divfooter1.append($lead), $divfooter2.append($atag)])])])));
if (i < 3) {
$("#politicsrowviewtop").append($divitem.append($divthumb.append([$divcardheader.append([$divp21.append($imgthumb), $divp22.append($pnewsname), $divmrauto.append($button)]), $imglinktag1.append($divimg.append($imggrp)), $divcaption.append([$imglinktag2.append($headcard), $imglinktag2.append($paracard), $divflex.append([$divtime.append($small), $divsvg.append($svgcapa_1.append([$g1.append($g1path.append($path1)), $g2.append($g2path.append($path2)), $g3.append($g3path.append($path3)), $g4.append($g4path.append($path4)), $g5.append($g5path.append($path5)), $g6.append($g6path.append($path6)), $g7.append($g7path.append($path7)), $g8.append($g8path.append($path8))])), $divsapce1.append($svgCapa2.append([$pathcapa20, $pathcapa21, $pathcapa22, $pathcapa23, $pathcapa24, $pathcapa25, $pathcapa26, $circle])), $divspace2.append($svgCapa3.append($gcapa1.append($gcapapath.append([$pathxy1, $pathxy2, $pathxy3]))))])])])));
} else {
$("#politicsrowview").append($divitem.append($divthumb.append([$divcardheader.append([$divp21.append($imgthumb), $divp22.append($pnewsname), $divmrauto.append($button)]), $imglinktag1.append($divimg.append($imggrp)), $divcaption.append([$imglinktag2.append($headcard), $imglinktag2.append($paracard), $divflex.append([$divtime.append($small), $divsvg.append($svgcapa_1.append([$g1.append($g1path.append($path1)), $g2.append($g2path.append($path2)), $g3.append($g3path.append($path3)), $g4.append($g4path.append($path4)), $g5.append($g5path.append($path5)), $g6.append($g6path.append($path6)), $g7.append($g7path.append($path7)), $g8.append($g8path.append($path8))])), $divsapce1.append($svgCapa2.append([$pathcapa20, $pathcapa21, $pathcapa22, $pathcapa23, $pathcapa24, $pathcapa25, $pathcapa26, $circle])), $divspace2.append($svgCapa3.append($gcapa1.append($gcapapath.append([$pathxy1, $pathxy2, $pathxy3]))))])])])));
}
shuffle();
}
});
由于您使用的是 jquery，因此您可以使用 getScript() 函数：https://api.jquery.com/jQuery.getScript
更新：我 运行 你的代码，当你达到第一个条件时它看起来像失败了：if ($(ev1.target).is("#foryoupage")) {
你的所有条件 return false，所以我会调查一下。
你的错误是你的 ID 属性中有一个 # 所以你所有的 .is() 都失败了
无论如何，您对事件目标的使用是可疑且不必要的
这应该会更好
我还会从加载的脚本中删除 $(document).ready(function(){ })
$(function() {
$(".navbar-nav").on('click', '.nav-item', function() {
var $techscript = $("<script>",{
"type": 'text/javascript',
src: '/js/' + $(this).data("js")
});
console.log($techscript.attr("src"))
$('head').prepend($techscript)
})
$("[href='#foryoupage']").click(); // load the first links onload
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="navbar-nav">
<a href="#foryoupage" class="nav-item nav-link active" data-js="flikfeedjs.js">For You</a>
<div></div>
<a href="#techpage" class="nav-item nav-link hello " data-js="flikfeedtech.js">Technology</a>
<div></div>
<a href="#politicspage" class="nav-item nav-link hello" data-js="flikfeedpoliticsjs.js">Politics</a>
<div></div>
<a href="#movtvpage" class="nav-item nav-link hello" data-js="flikfeedmoviesjs">Movies/Tv shows</a>
</div>
</body>