我遇到了一种情况，我正在通过 Javascript 对象中的 AJAX 调用生成内容(视频链接)。一旦从后端返回该内容，就会生成 HTML 字符串并将其附加到 DOM 中的当前 HTML。 此 HTML 字符串包含“div”中的视频链接包装器。我需要将新的 Javascript 对象应用到每个新生成的 div，并使用以下代码完成此操作:
if(response.videos.length != 0) {
jQuery(response.videos).each(function(key, video) {
self.html += "<div class='col-md-4' data-related-video='" + video.videoId + "'>";
self.html += '<a href="#" class="dashboard-video"></a>';
self.html += '<div class="video-information">';
self.html += '<h5 class="tk-bebas-neue">' + video.videoName + '</h5>';
self.html += '<p>' + video.videoDesc + '</p>';
self.html += '<p>Equipment: ';
self.html += "</p>";
......................................MORE CODE
self.html += "</div>";
self.html += '</div>';
self.html += "</div>";
newRatingArrayKey.push("#" + self.relatedDiv + " div[data-related-video=" + video.videoId + "] .video-rating");
});
jQuery("#" + jQuery(self.element).attr("data-related") + " .col-md-8").append(self.html);
jQuery(newRatingArrayKey).each(function(key, element) {
element = jQuery(element);
newRatingObject[key] = new Rater(element, jQuery(element).attr("data-rel"), jQuery(element).find(".star"), jQuery(element).attr("data-user-id"));
});
}
如您所见，在生成新的 HTML 字符串后，我将其添加到 DOM，然后循环遍历新的 div 以将“rater”类应用于它们。我的问题是，有没有办法在将“rater”类应用于每个新生成的 div 之前将其应用于 DOM？它只是让我认为，如果添加的新内容和应用于新内容的评估者类之间出现问题，该页面可能会出现错误。 谢谢!
最佳答案
您实际上不必做任何事情来满足您的担忧。在您的代码执行完毕之前，浏览器不会重新绘制页面，并且在您添加“评估者”类之前，也不会执行任何可能访问 DOM 的其他 JavaScript 代码。
如果您确实想要执行您概述的操作，则可以使用未附加的元素(例如 $('<div/>') )来添加您的内容，然后再将其移植到事件 DOM 上。
但真正最好的解决方案是不要连接字符串来创建 DOM 元素。相反，使用 DocumentFragment 和 createElement api，然后根据您的选择自由添加类。
关于javascript - 在将生成的内容应用于 DOM 之前，将 Javascript 类应用于生成的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27015151/