Question

的index.html

<html>
    <head>
        <script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
        <script src="jquery.js"></script>
    </head>
    <body>
        <div id="myDiv" name="myDiv" title="Example Div Element">


        </div>
    </body>
</html>

的jquery.js

$.ajax
({
 type: "GET",
 url: "url",
 dataType: 'image/png',
 async: false,

 beforeSend: function (xhr) {
 xhr.withCredentials = true;
 xhr.setRequestHeader("Authorization", "Bearer xxx");
 },
 complete: function (data) {
 console.log("yello");
 $('#myDiv').html('<img id="target">');
 }
 });

简单问题，

为什么这条线无效？ $('#myDiv').html('<img id="target">'); 当我检查页面的来源没有显示，没有图像标记。我不太明白为什么我确信我正在做的一切。

谢谢！

Answer 1

将您的功能包含在.ready()：

中

 $(function()
 {
     $.ajax
     ({
         type: "GET",
         url: "url",
         dataType: 'image/png',
         async: false,

         beforeSend: function (xhr) {
             xhr.withCredentials = true;
             xhr.setRequestHeader("Authorization", "Bearer xxx");
         },
         complete: function (data) {
             console.log("yello");
             $('#myDiv').html('<img id="target">');
         }
     });
 });

这确保在加载DOM之后调用ajax方法。

Answer 2

在您的代码后尝试console.log($('#myDiv').html())并在控制台中看到该值，您会在那里找到图像，但它不会在源视图中显示

Answer 3

如果您发布的javascript是完整的jquery.js文件，那么正在发生的是在浏览器呈现div标签之前运行javascript，因此jquery选择器找不到任何内容，因此您的console.log调用返回未定义。

这是一个快速fiddle我一起来验证你的javascript，请注意我将图像创建包装在$(function(){});块中。这是document.ready（function（）{}）;

的jquery简写

在jQuery中创建图像标记不起作用？

3 个答案: