Question

无法弄清楚为什么我的按钮在点击时不做任何事情。甚至不会发布控制台日志。使用ajax相当新，因此有点困惑。在此先感谢，我希望这是简单的事情，我很想念。

这是带有按钮的页面

{% extends "website/base.html" %}
{% load staticfiles %}

{% block content %}
<style>
    #table td {
        padding: 0px;
        margin: 0px;
    }

    #table {
        border-spacing: 0px;
    }
</style>

<form id="search-form" method="POST" action="{% url 'searchs' %}">
    {% csrf_token %}
    <div class="active-cyan-3 active-cyan-4 mb-4">
        <input class="input" name="username" type="hidden" value="{{ username }}">
        <input class="form-control" type="text" placeholder="Search" aria-label="Search" name="search-input"
            id="search-input">
    </div>
</form>
<div class="text-center">
    <button name="search-button" id="searchbut" align="centre" class="btn btn-dark btn-lg">Search</button>
</div>
<!-- Search form -->
<br>
<table id="search-tbl" class="table" width="100%" border=1>
    <thead class="thead-dark">
        <tr>
            <th>Image</th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody>
        {% for Auction in results %}

        <tr class='bg-white' align="center">
            <td width="60%" vertical-align="middle" align="center">
                {% load static %}
                <a href="auction/{{ Auction.id}}">
                    <img width="" href="auction/{{ Auction.id}}" src="{{ Auction.picture }}">
                </a>
            </td>
            <td align="center"><a href="auction/{{ Auction.id}}">{{ Auction.title }}</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% endblock %}

<script>
    $(function () {
        $('#searchbut').click(function () {
            console.log("pushed")
            $.ajax({
                url: "{% url 'searchs' %}",
                method: "POST",
                data: $("#search-form").serializeArray(),
                success: function (data) {
                    console.log(data)
                    $("#search-tbl tbody").remove();
                    for (var i = 0; i < data.results.length; i++) {
                        $("#search-tbl tbody").append("<tr class='bg-white' align='center'><td width = '60%'' vertical-align= 'middle' align='center'><a href='auction/" + data.results[i].id + "><img width = '350' href='auction/" + data.results[i].id + "' src='/static/" + data.results[i].picture + "'></a></td><td align='center'><a href='auction/" + data.results[i].id + "'>" + data.results[i].title + "</a></td></tr>")
                    }
                }
            })
        })


    })
</script>

，这是带有布局的页面。我最初以为在布局中引入了jquery脚本会引起问题，但是从那里将它们删除并放在实际模板上后仍然无法使用。

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>{{appname}}</title>
    <style>
        .active-cyan-3 input[type=text] {
            border: 1px solid #4dd0e1;
            box-shadow: 0 0 0 1px #4dd0e1;
            float: left;
            width: 80%;
        }

        .bg-lightblue {
            background-color: #ebf4ff;
        }

        .vertical-center {
            min-height: 100%;
            /* Fallback for browsers do NOT support vh unit */
            min-height: 90vh;
            /* These two lines are counted as one :-)       */
            align-items: center;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="{% url 'index' %}">{{appname}}</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                {% if loggedin %}
                <span class="navbar-text">
                    Welcome ({{ username }})
                </span>
                {% endif %}

                <li class="nav-item active">
                    <a class="nav-link" href="{% url 'index' %}">Home <span class="sr-only">(current)</span></a>
                </li>
                {% if loggedin %}
                <li class="nav-item">
                    <a class="nav-link" href="#">Profile</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'logout' %}">Logout</a>
                </li>
                {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'login' %}">Login</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'signup' %}">Signup</a>
                </li>
                {% endif %}
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>


    <div class="jumbotron vertical-center bg-lightblue">
        <div class="container">

            {% block content %}
            {% endblock %}

        </div>
    </div>




    <br>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>
</html>

Answer 1

我认为问题是您在jquery函数的末尾缺少分号，但我从未见过这种初始化click函数的方法，我通常使用class CellName:UITableViewCell { let lbl = UILabel() override init(style: UITableViewCellStyle, reuseIdentifier: String?) { super.init(style: style, reuseIdentifier: reuseIdentifier) lbl.backgroundColor = UIColor.red self.contentView.addSubview(lbl) // set constraints here } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) } }

启动脚本

您可以尝试使用以下代码：

$( document ).ready(function() {});

网站上的Ajax.click功能按钮不执行任何操作

1 个答案: