Question

当用户单击站点上的按钮时，我试图将新的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>

页面的外观如下：

[]

非常感谢您的帮助。

Answer 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字符。

在页面加载后将EJS部分与JQuery附加在一起？

1 个答案: