页面加载后用 JQuery 附加 EJS 部分？答案

【问题标题】：Append EJS partial with JQuery after page loaded?页面加载后用 JQuery 附加 EJS 部分？
【发布时间】：2019-06-07 19:43:35
【问题描述】：

当用户单击网站上的按钮时，我正在尝试将新的 EJS 部分附加到我的页面；但是，由于页面已经加载，EJS 部分正在以 HTML 文本而不是 EJS 呈现。示例：

我的 JQuery 代码：

    var lunchRefreshButton = $(".myRefreshButtonLunch");        
    lunchRefreshButton.click(function() {
                  var outerParent = $(this).closest(".lunch__items__container");
                  var randomFoodItem = '<div class="food__item__image">\
                                          <img class="food__image" src="<%=newFoodItem.image%>">\
                                        </div>\
                                        <div class="food__item__info">\
                                          <p class="lunch__name"><%=newFoodItem.name%></p>\
                                          <p class="food__info">Servings: <%= newFoodItem.nutrition.serving_size %></p>\
                                        </div>\
                                        <div class="myBtn">\
                                          <div class="refreshContainer">\
                                            <i class="fa fa-sync-alt fa-lg myRefreshButtonLunch"></i> \
                                          </div>\
                                          <i class="fa fa-info-circle fa-lg myBtnBtnLunch"></i>\
                                        </div>';

                  outerParent.append(randomFoodItem);
     });

这里是 EJS 的一个例子：

    <div class="lunch__items__container">
           <div class="refreshContainer">
              <i class="fa fa-sync-alt fa-lg myRefreshButtonLunch"></i> 
           </div>
           <% var random = Math.floor(Math.random() * 30); %>
           <% var newFoodItem = extraLunchArr[random]; %>
           //appended item is supposed to go here
    </div>

这是页面的样子：

[]

非常感谢任何帮助。

【问题讨论】：

标签： jquery node.js express ejs

【解决方案1】：

试试这个。

var randomFoodItem = '<div class="food__item__image">\
                           <img class="food__image" src=" ' + <%=newFoodItem.image%> + ' ">\
                      </div>\
                      <div class="food__item__info">\
                           <p class="lunch__name"> ' + <%=newFoodItem.name%> + '</p>\
                           <p class="food__info">Servings: ' + <%= newFoodItem.nutrition.serving_size %> + '</p>\
                      </div>\
                      <div class="myBtn">\
                           <div class="refreshContainer">\
                                 <i class="fa fa-sync-alt fa-lg myRefreshButtonLunch"></i> \
                           </div>\
                           <i class="fa fa-info-circle fa-lg myBtnBtnLunch"></i>\
                      </div>';

ejs 元素必须转义，否则将被视为 html 字符。

【讨论】：