Jquery Django-click事件不发生'；t绑定到div元素

我一直在尝试将单击事件绑定到html文件中的div元素，这是Django项目的一部分。我的

菜单.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 %}   

这是我的

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为plus的div。我尝试将

bind（）

更改为

on（）

，但没有成功

---

我认为这是因为文档可能还没有准备好，所以我也尝试了

$（document）
例如：

{% 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 %}

{%用于id、图像、imageList%中的菜单]
{{menu}}

+
单击以添加。
{%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>


$（文档）.ready（函数（）{
$（“.plus”）。在（“单击”，函数（）{
var id=$（this.attr（'id'）.split（'-'）[1]；//提供id
$.get（“/test/”+id+“/”，函数（数据）{
如果（数据事实类型==“T”）{
项目=数据。事实\注；
}
$（'#result-'+id）.html（项目）；
});
});
});
问题是，文档上的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 %}

{%用于id、图像、imageList%中的菜单]
{{menu}}

+
单击以添加。
{%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>


$（文档）.ready（函数（）{
$（“.plus”）。在（“单击”，函数（）{
var id=$（this.attr（'id'）.split（'-'）[1]；//提供id
$.get（“/test/”+id+“/”，函数（数据）{
如果（数据事实类型==“T”）{
项目=数据。事实\注；
}
$（'#result-'+id）.html（项目）；
});
});
});
问题是，文档上的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 %}

{%用于id、图像、imageList%中的菜单]
{{menu}}

+
单击以添加。
{%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>


$（文档）.ready（函数（）{
$（“.plus”）。在（“单击”，函数（）{
var id=$（this.attr（'id'）.split（'-'）[1]；//提供id
$.get（“/test/”+id+“/”，函数（数据）{
如果（数据事实类型==“T”）{
项目=数据。事实\注；
}
$（'#result-'+id）.html（项目）；
});
});
});
问题是，文档上的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 %}

{%用于id、图像、imageList%中的菜单]
{{menu}}

+
单击以添加。
{%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>


$（文档）.ready（函数（）{
$（“.plus”）。在（“单击”，函数（）{
var id=$（this.attr（'id'）.split（'-'）[1]；//提供id
$.get（“/test/”+id+“/”，函数（数据）{
如果（数据事实类型==“T”）{
项目=数据。事实\注；
}
$（'#result-'+id）.html（项目）；
});
});
});
没有。它仍然不可辨认。我还尝试在div中硬编码id的值，但也没有成功。如果id必须是唯一的，那么我们是否也应该获得美元（“.plus”）的唯一id行吗？首先，这是一个一般的想法-接下来，你现在不需要在div中使用span。另外，在加号周围加一点空格，这样就有了更多的点击空间。这样做了。没有改变。我甚至把div元素放在for循环之外，给了它id'.plus'。仍然。没有。改变。还有，“result-{id}”是字符串。因此它不会解析{{id}。如何解析{{id}}？是否确定
{id}
没有得到解决？它应该得到解决。你能将生成的HTML粘贴到小提琴中，并将链接粘贴到这里吗？没有。它仍然不可读取。我还尝试在div中硬编码id的值，但也没有效果。如果id必须是唯一的，那么我们不应该也获得$（“.plus”）的唯一id。在（“单击”），函数（）行吗？首先，这是一个一般的想法-接下来，你现在不需要在div中使用span。另外，在加号周围加一点空格，这样就有了更多的点击空间。这样做了。没有改变。我甚至把div元素放在for循环之外，给了它id'.plus'。仍然。没有。改变。还有，“result-{id}”是字符串。因此它不会解析{{id}。如何解析{{id}}？是否确定
{id}
没有得到解决？它应该得到解决。你能将生成的HTML粘贴到小提琴中，并将链接粘贴到这里吗？没有。它仍然不可读取。我还尝试在div中硬编码id的值，但也没有效果。如果id必须是唯一的，那么我们不应该也获得$（“.plus”）的唯一id。在（“单击”），函数（）行吗？首先，这是一个一般的想法-接下来，你现在不需要在div中使用span。另外，在加号周围加一点空格，这样就有了更多的点击空间。这样做了。没有改变。我甚至把div元素放在for循环之外，给了它id'.plus'。仍然。没有。改变。还有，“result-{id}”是一个字符串。因此它不会解析{{id}。如何解析{id}？您确定
{{id}}
没有解析吗？它应该解析。您能将生成的HTML粘贴到小提琴中，并将链接粘贴到此处吗