Создание тега изображения в jQuery не работает?

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

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">'); Когда я просматриваю источник страницы, ничего не отображается, нет тега изображения. Я не совсем понимаю почему, поскольку уверен, что все делаю правильно.

Спасибо!

1. Попробуйте $('#myDiv').html('Works !'); и посмотрите, появляется текст или нет.

2. Где находится ваш тег <body>?

3. Вы уверены, что ваш вызов ajax завершен и ваша функция успеха выполняется?

4. Вы используете инспектор? В противном случае источник не будет отражать динамические изменения.

5. Я использую Chrome inspector. Функция должна быть нажата независимо от того, завершается ли получение (что оно и делает). Тег тела есть, я просто глупый и плохо вставляю его сейчас. .html (‘Работает!) не отображается.

Ответ №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">');
         }
     });
 });

Это гарантирует вызов метода ajax после загрузки DOM.

Ответ №2:

Если опубликованный вами javascript является полным jquery.js файл, тогда происходит то, что javascript запускается до того, как браузер отобразил тег div, поэтому селектор jquery ничего не находит, следовательно, ваша консоль.возврат вызова журнала не определен.

Вот небольшая скрипка, которую я провел вместе, чтобы проверить ваш javascript, обратите внимание, что я заключил создание изображения в $(function(){}); блок. это сокращение от document.ready в jquery(функция(){});

Ответ №3:

попробуйте console.log($('#myDiv').html()) после вашего кода и посмотрите значение в своей консоли, вы найдете там изображение, но оно не будет отображаться в исходном виде

1. я продемонстрировал это локально dropbox.com/s/n93oocn8e2e2wxk /…

2. <html> <head> <script src=»//code.jquery.com/jquery-2.0.0.min.js»></script> </head> <body> <div id=»myDiv» name=»myDiv» title=»Example Div Element»> </div> </body> <script> $.ajax ({ type: «GET», url: «/images/cone.png», 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»>’); console.log($(‘#myDiv’).html()); } }); </script> </html>