JQuery .Load HTML格式不正确
[英]JQuery .Load HTML not Formatting Properly
问题描述
Afternoon StackOverflow! 
下午StackOverflow！
I seem to have an issue. 我似乎有问题。 When I use: 当我使用时：
$("#specificDIV").load("new.html")
The HTML content gets placed into the div, but the CSS and JS doesn't work and gets formatted wrong. HTML内容被放入div中，但是CSS和JS不起作用并且格式错误。 I have items like a slider and words, but they seem to overflow outside of the divs, aren't as preserved as the original fonts and the slider doesn't even function. 我有一些像滑块和单词这样的项目，但是它们似乎在div之外溢出，没有像原始字体那样保留，并且滑块甚至不起作用。
I have tried copying in the header as the same as the original html inside of new.html to see if the CSS and JS have to be referenced and still nothing. 我尝试过在标题中复制与new.html中的原始html相同的标题，以查看是否必须引用CSS和JS，但仍然一无所获。 I have also seen that the .load is also deprecated and used: 我还看到.load也已弃用并使用：
$("#specificDIV").on("load","new.html")
and still broke exactly like before on the first try, but now when I call it I get an error: 仍然像以前第一次尝试时一样破裂，但是现在当我调用它时出现错误：
load Uncaught TypeError: Cannot create property 'guid' on string "new.html"
which leads me back to the deprecated load function, which isn't apparently very cool to do. 这使我回到不建议使用的加载功能上，这显然不是一件很酷的事情。
How do I fix the non formatting .load() issue and the .on() guid error? 如何解决非格式化.load（）问题和.on（）guid错误？ Anyways thanks for reading up to this far and in advanced. 无论如何，感谢您对本文的深入了解。
edit: Here's some screenshots at what is happening. 编辑：这是正在发生的一些屏幕截图。
2 个解决方案
解决方案1
1 2017-10-06 19:55:25
Two items: 两项：
$("#specificDIV").on("load", "new.html") doesn't work.
Nor should it. 也不应。 This is really saying "when $("#specificDIV") receives a 'load' event execute the string "new.html". The confusions comes because JQuery has two .load() methods. The above .on() style replaces the older .load() style. 这实际上是在说“当$（“＃specificDIV”）接收到一个'load' 事件时，执行字符串“ new.html”。造成混乱的原因是JQuery有两个.load()方法。以上.on()样式替换了较旧的.load()样式。
You're wanting to use the other .load() method, which is fine. 您想使用其他.load()方法，这很好。 However, jQuery documentation says: 但是，jQuery文档说：
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document.
<html>,<title>, or<head>elements.<html>，<title>或<head>元素。 As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
Is your CSS and JS within a head element in your retrieved file? CSS和JS是否位于所检索文件的head元素中？ If so, move them out of <head> . 如果是这样，请将其移出<head> 。
解决方案2
0 2017-10-06 19:35:59
Please try this 请尝试这个
$.ajax({
url: 'ajax/new.html',
success: function(data) {
$('#specificDIV').html(data);
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.