Question

我一直试图将click事件绑定到html文件中的div元素，这是Django项目的一部分。我的menu.html如下 -

{% extends "base.html" %}

{% block title %}Today's menu{% endblock %}

{% block head %}
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
        </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#plus").bind("click", function () {
                $.get("/test/"+this.id+"/", function(data) {
                    if (data.fact_type=="T") {
                         item = data.fact_note;
                    }
                    $('#result')[0].innerHTML=item;
                });
            });
        });
        </script>

{% endblock %}

{% block content %}

{% for id,image,menu in imageList %}
<div style = "display:inline-block">
    <img src="{{ MEDIA_URL }}{{ image }}">
    <p>{{ menu }}</p>
    <div id="plus"><span>+</span></div>
    <div id="result">Click to add.</div>
</div>

{% endfor %}
{% endblock %}

此模板已从base.html模板文件扩展，即

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>{% block title %}{% endblock %}</title>
    {% block head %}{% endblock %}
</head>
<body>
    <h1>Welcome</h1>
    {% block content %}{% endblock %}
    {% block footer %}
    <hr>
    <p style="display:block>Footer.</p>
    {% endblock %}
</body>
</html>

这是我的views.py功能 -

def order(request, product_id):
    message = {"fact_type": "", "fact_note": ""}
    if request.is_ajax():
        fact = get_object_or_404(Fact, id=fact_id)
        message['fact_type'] = fact.type
        message['fact_note'] = fact.note
    else:
        message = "Error."
    return HttpResponse(simplejson.dumps(message), content_type='application/json')

但是click事件并没有绑定到id加上div。我尝试将bind()更改为on()，但没有运气。

认为这是因为该文件可能尚未准备好，我也尝试了$(document).on('click','#plus',function () { });，但它没有做任何事情。

Answer 1

问题是，文档上的 ID 是唯一的，这是绝对必要的。将一个类与唯一ID结合使用，您的代码应该可行。

示例：

{% for id,image,menu in imageList %}

    <div style = "display:inline-block">
        <img src="{{ MEDIA_URL }}{{ image }}">
        <p>{{ menu }}</p>
        <div id="plus-{{id}}" class="plus"><span>+</span></div>
        <div id="result-{{id}}" class="result">Click to add.</div>
    </div>
{% endfor %}

你的脚本看起来像这样：

<script type="text/javascript">
    $(document).ready(function() {
        $(".plus").on("click", function () {
            var id = $(this).attr('id').split('-')[1]; // gives you the id
            $.get("/test/"+ id +"/", function(data) {
                if (data.fact_type=="T") {
                     item = data.fact_note;
                }
                $('#result-' + id).html(item); 
            });
        });
    });
    </script>

Django-单击事件不绑定到div元素

1 个答案: