javascript - Onclick 无法使用 Bootstrap 工作

Question

我使用过 Django 和 Bootstrap，但 onclick 属性有问题。当我单击按钮时，它不会向我显示任何内容。以下是 HTML:

{% extends 'base_profile.html' %}

{% block profile %}

<br />
    <div id="content">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
    <div class="fb-profile">
        <img id='background_picture' align="left" class="fb-image-lg" src="https://s-media-cache-ak0.pinimg.com/originals/ad/38/bd/ad38bd348826054d3fd5e940950b1124.jpg" alt="Profile image example"/>
        {% load staticfiles %}
        <img id='profile_picture' align="left" class="fb-image-profile thumbnail" src="{% static 'media/{{path}}' %}" alt="media/{{path}}"/> 
        <!-- 200 x 200 -->
        <div class="fb-profile-text">
            <a href="/profile" id="full_name">{{ user.first_name }} {{ user.last_name }}</a>
            <div id="wrap">
            <p>
                <ul class="nav nav-tabs">
                    <li role="presentation" class="active"><a href="/profile">My profile</a></li>
                    <li role="presentation"><a href="/fallowers">Fallowers</a></li>
                    <li role="presentation"><a href="/fallowing">Fallowing</a></li>
                    <li role="presentation"><a href="/logout">Logout</a></li>
                    <li role="presentation">
                    <button id="compose" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Compose Twitt
                    </button> </li>
                </ul>
            </p>
            <p>{{ user_profile.moto }}</p>
            {% for twitt in all_twitters reversed %}
            <hr>
            <div class="media">
                <div class="media-left media-middle">
                    <a href="#">
                    {% load staticfiles %}
                        <img class="media-object" src="{% static 'twittapp/images/logo_profile.png' %}" alt="Some picture">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading"><a href="">{{ user.first_name }} {{ user.last_name }}</a></h4>
                        {{ twitt.content }}
                </div>
            </div>
            <hr>

            <a href="javascript:void(0)" onclick="deleteTwitt();" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span> Delete</a>

            <a href="#" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-comment"></span> Comment</a>
            <a href="#" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-eye-open"></span> See the comments</a>
            {% endfor %}
            </div>
        </div>
    </div>
</div> 
    </div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Compose Twitt</h4>
      </div>

      <form action="/profile/compose/" method="post">{% csrf_token %}
        <div class="modal-body">
            <textarea style="resize:none" class="form-control" rows="3" cols="20" name="twitt_content" id="textarea"></textarea>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button id="save_twitt" type="submit" class="btn btn-primary">Twitt</button>
        </div>
        <p id="left_chars">sdks</p>
      </form>
    </div>
  </div>
</div>
{% endblock profile %}

这是位于外部 js 文件中的函数:

function deleteTwitt(){
    $.post('/delete', {twitt_id: '{{ twitt.id }}'});
}; 

Answer 1

首先确保您在当前页面中使用 script 标签嵌入了外部 js 文件，如果没有，请嵌入并检查。如果文件已嵌入，则只需在 HTML 代码中更改以下内容

<a href="#" onclick="deleteTwitt();" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span> Delete</a>

这里我刚刚从 anchor 标记的 href 中删除了“javascript:void(0)”。如果仍然不起作用，请告诉我。