我在 Django 模板中遇到错误，使用 event.preventDefault();

Question

我制作了一个 dajngo 网站，如果产品有一个 is_active = False 的字段，它会将其从商店的购物篮中删除。

所以在html文件中写了这个脚本：

            {% if table.is_active %}
                    <div data-index="{{ table.id }}" class="table table-item">
                    <a href="{% url 'table_details' table.id %}" class="table-link">
                        <img class="table-img ib" src="{{ table.image.url }}" alt="">
                        <p class="title ib">{{ table.name }}</p>
                    </a>
                </div>
            {% else %}
                    <div data-index="{{ table.id }}" class="table table-item"></div>
                <script>
                    console.log("hello world 1")
                  $(document).ready(function (event) {
                  console.log("hello world 2")
                    event.preventDefault();
                    var tablid = $(this).data('index');
                    console.log(tablid)
                    $.ajax({
                      type: 'POST',
                      url: '{% url "basket:basket_delete" %}',
                      data: {
                        tableid: $(this).data('index'),
                        csrfmiddlewaretoken: "{{csrf_token}}",
                        action: 'post'
                      },
                      success: function (json) {
                        $('.table-item[data-index="' + tablid + '"]').remove();
                        document.getElementById("subtotal").innerHTML = json.subtotal;
                        document.getElementById("basket-qty").innerHTML = json.qty
                      },
                      error: function (xhr, errmsg, err) {}
                    });
                  })
            </script>
        {% endif %}

在 console.log 中，它给我一个带有相同文本的警告和错误，

# Uncaught TypeError: event.preventDefault is not a function
# at HTMLDocument.<anonymous> (basket/:116:27)
# at e (jquery-3.5.1.min.js:2:30005)
# at t (jquery-3.5.1.min.js:2:30307)

所以我尝试用 event.preventDefault() 删除该行，但随后 div 的数据索引停止在 tablid varibale 中使用，当我 coneole.log(tablid) 时，它显示未定义。

Answer 1

在您的示例中，

this

指的是整个文档，而不是 div 元素：

var tablid = $(this).data('index');

相反，为您的元素设置 id（例如

id='foo'

）并使用它：

var tablid = $('#foo').data('index');