Django- click event doesn't bind to div element

Question

I've been trying to bind a click event to a div element in an html file, that is part of a Django project. My menu.html is as follows-

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

This template has been extended from the base.html template file, which is-

<!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>

Here's my views.py function -

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')

But the click event doesn't bind to the div with the id plus. I've tried changing bind() to on() but with no luck.

Thinking this was caused because the document was probably not being ready, I also tried $(document).on('click','#plus',function () { }); , yet it didn't do anything.

karthikr · Accepted Answer · 2015-03-22 00:08:53Z

3

The issue, is, it is absolutely essential that the IDs on a document are unique. Use a class in conjunction with a unique ID, and your code should work.

Example:

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

And your script would look like this:

<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>

edited Mar 22, 2015 at 0:08

answered Mar 22, 2015 at 0:03

karthikr

100k26 gold badges208 silver badges191 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

deathstroke Over a year ago

Nope. It is still unclickable. I also tried to hard code the value of the id in the div, but it didn't work either. If the id has to be unique, then shouldn't we also get unique ids to the $(".plus").on("click", function () line as well?

karthikr Over a year ago

first off, this was a general idea - next, you dont need the span inside the div now. Also, give a little padding around the plus, so there is more space for the click.

deathstroke Over a year ago

Did that. No change. I even put that div element outside the for loop and gave it the id '.plus'. Still. no. change.

deathstroke Over a year ago

Also, "result-{{id}}" is a string. So it won't parse the {{id}}. How do I get the {{id}} to be parsed?

karthikr Over a year ago

are you sure {{id}} does not get resolved ? It should. Can you paste the resulting HTML in a fiddle, and paste the link here?

|

Collectives™ on Stack Overflow

Django- click event doesn't bind to div element

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related