如何使用jQuery插入数组中的每个元素的其他JS脚本

Question

我正在尝试使用Google嵌入式查看器API添加"图书预览"按钮。我想将按钮添加到用户获得的每本书结果。当我使用.append将脚本添加到列表中时，脚本会删除所有内容，当我提交搜索查询时，所有内容都消失了，我只看到预览按钮。

我尝试将<script>零件放在HTML文件中，但是当我这样做时，该功能以纯文本形式出现。我还尝试将脚本放在单独的文件中并使用$.getScript，但这没有做任何事情。我还尝试将脚本附加到单独的DIV上，但这也没有用。当我将脚本直接放在HTML文件中时，它不会删除所有内容，但也不适用于数组数据。

主JS文件：

function displayResults(responseJson, maxResults) {
    console.log(`displayResults ran`);
    console.log(responseJson);
    $('#results-list').empty();
    for (let i = 0; i < responseJson.items.length & i < maxResults; i++){

        $('#results-list').append(
            `
          <li>
          <p>${responseJson.items[i].volumeInfo.industryIdentifiers[1].identifier}</p>
          <img src="${responseJson.items[i].volumeInfo.imageLinks.thumbnail} alt="The book">
          <h3>${responseJson.items[i].volumeInfo.title}</h3>
          <h2>${responseJson.items[i].volumeInfo.authors}</h2>
          <p>${responseJson.items[i].volumeInfo.description}</p>
          <a href="${responseJson.items[i].saleInfo.buyLink}">Buy this Book</a>
          <div></div>
          <input type="submit" class="preview-button" id="book-preview" value="Preview This Book">
          </li>
          `);
         $.getScript("book-viewer-index.js")
        };

      $('#search-results').removeClass('hidden');
};

链接文件/按钮代码：

 <div>
    <script type="text/javascript" 
      src="https://books.google.com/books/previewlib.js"></script>
    <script type="text/javascript">
      GBS_insertPreviewButtonPopup('ISBN:0738531367');
    </script>
    })
 </div>

预期的结果是每个书籍搜索结果下的按钮，该按钮将显示硬编码的书预览。目前没有实际结果。我在"预览书"按钮中添加了我必须这样做的，但这实际上并不是我想要的。

Answer 1

https://books.google.com/books/previewlib.js只需要在循环开始之前一次包括一次。

您只需要为您在循环中创建的每个元素调用gbs_insertpreviewbuttonpopup，而无需将脚本块注入html即可调用。

直接调用附录列表后，您可以在循环中调用gbs_insertpreviewbuttonpopup。