javascript - 在控制台 JQuery 中未定义

Question

我正在使用 Django 的网站上工作，我是 Jquery 的初学者，我正在尝试在提交表单时使用 JQuery 显示图像。图像不显示，我在控制台“未定义”中收到错误。

查询：

var chatHolder = $('#chat-items')
// below is the message I am receiving
socket.onmessage = function(e) {
var chatDataMsg = JSON.parse(e.data)

var profile_pic = $('#avatarImg').attr("src");
console.log(profile_pic);

chatHolder.append("<div class='media w-50 mb-3'>" + "<img src=" + profile_pic + " width='30' height='30' class='rounded-circle mt-1'/>" + "<div class='media-body ml-2'>" + "<div class='bg-light rounded py-2 px-3 mb-2'>" + "<p class='text-small mb-0 text-black'>" + chatDataMsg.message + "</p>" + "</div>" + "<p class='small text-muted'>" + newMonth  +  newDate + "<i class='fa fa-ellipsis-h float-right'></i>" + "</p>" + "</div>" + "</div>")

}

模板：

<div class="px-4 py-3 chat-box bg-white" id='chat-items' style="height:435px;">
    {% for chat in object.chatmessage_set.all %}
     {% if request.user != chat.user %}
    <!-- Sender Message-->
    <div class="media w-50 mb-3">  
      <img src="{{ chat.user.profile.profile_pic.url }}" id="avatarImg" width="30" height="30" class="rounded-circle mt-1">         
      <div class="media-body ml-2">
        <div class="bg-light rounded py-2 px-3 mb-2">
          <p class="text-small mb-0 text-black">{{ chat.message|emoticons }}</p>
        </div>
        <p class="small text-muted">
        {{ chat.timestamp|date:'M j, Y,  g:i a' }}
        <i class="fa fa-ellipsis-h float-right"></i>
        </p>
      </div>
    </div>
    {% endif %}
    {% endfor %}

<form id='form' method='POST' action="." class="chatbox-form">
    {% csrf_token %}
    {{ form }}
    <input = "submit" value="send">
</form>

标签： javascriptpythonjquerydjango