如何单击动态创建的链接，然后从该链接创建新的动态页面？答案

【问题标题】：How to click on a dynamically created link to then create a new dynamic page from that link?如何单击动态创建的链接，然后从该链接创建新的动态页面？
【发布时间】：2020-04-01 00:03:02
【问题描述】：

我编写了一个自定义 API（node.js 应用程序），它从 medium.com 获取有关博客的信息，现在有

文章作者/主图，
标题，
链接到 medium.com 上的文章（冗余），
整个文章文本，在 JSON 输出中。

示例 API/JSON：

{
"img": [
"https://upload.wikimedia.org/wikipedia/commons/4/42/Blog_%281%29.jpg"
],
"title": [
"The old and the new or not so new: Java vs JavaScript"
],
"link": [
"https://medium.com/@aki9154/the-old-and-the-new-or-not-so-new-java-vs-javascript-760f84e87610?source=rss-887f1b1ddb75------2"
],
"desc": [
"<p>It’s funny how the name JavaScript makes you believe that it is somehow..."
]
}

然后我轮询这个 API/JSON 并以缩略图格式吐出输出，现在是基本的 html（没有设计/CSS）。

当用户点击缩略图并且我需要确保我显示正确的文章时，我被卡住了？！

我需要在点击缩略图/文章时显示一个新页面，我可以使用上面 JSON 中的#4 作为动态创建的新页面的输出并将其很好地输出）

我现在面临的问题是如何在点击动态创建的链接时动态生成正确的文章？

现在当我点击缩略图时什么都没有发生，这就是这个项目链接显示的内容......

我做了一些 stackoverflow 研究并阅读了一些 jQuery 文档（事件传播和更多...），并且能够对 index.js 进行更改，下面是它的外观，但没有任何效果，任何帮助将不胜感激。 ..

index.js：

$(function () {
  var desc = "";
  function newWin() {
    var w = window.open();
     $(w.document.body).html('<p>'+desc+'</p>');
   }
    var $content = $('.cards-in-grid');
    var url = 'link-for private use now';
    $.get(url, function (response) {
      var output = '';
      console.log(response);
      $.each(response, function (k, item) {
      title = item.title;
      var author = item.img;
      desc = item.desc;
      output += '<li><img src="'+author+'" alt=""><h2>' + title + '</h2></li>';
      $(".cards-in-grid ul").on("click", "li", function(){
        newWin;
      });
      return k;
    });
    $content.html(output);
   });
 });

【问题讨论】：

你的代码看起来不错。但是添加 $(w.document.body).append($content);另一个想法是您应该检查当前网址并检查响应

标签： javascript jquery html node.js dom-manipulation

【解决方案1】：

$(function () {
    var $content = $('.cards-in-grid');
    var url = 'link-for private use now';
    $.get(url, function (response) {
      var output = '';
      var list = "li";
      $.each(response, function (k, item) {
        var listNum = list+k;
        var idy = "#"+listNum;
        var desc = "";
        title = item.title;
        var author = item.img;
        desc = item.desc;
        //GIVE ID to each LI using a variable
        output += '<li id="'+listNum+'"><img src="'+author+'" alt=""><h2>' + 
        title + '</h2></li>';
        $content.html(output); 
        $content.on("click",idy, function(){
          var w = window.open();
          $(w.document.body).html('<p>'+desc+'</p>');
        });
        return k;
      });
    });
 });

这个效果很好，经过一番思考和琢磨，终于成功了！！ 如果对您有帮助，请点赞回答！谢谢！

【讨论】：