title: Django- click event doesn't bind to div element
body: <p>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 <code>menu.html</code> is as follows-</p>
  
  <pre><code>{% extends "base.html" %}
  
  {% block title %}Today's menu{% endblock %}
  
  {% block head %}
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;
          &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(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;
                  });
              });
          });
          &lt;/script&gt;
  
  {% endblock %}
  
  {% block content %}
  
  {% for id,image,menu in imageList %}
  &lt;div style = "display:inline-block"&gt;
      &lt;img src="{{ MEDIA_URL }}{{ image }}"&gt;
      &lt;p&gt;{{ menu }}&lt;/p&gt;
      &lt;div id="plus"&gt;&lt;span&gt;+&lt;/span&gt;&lt;/div&gt;
      &lt;div id="result"&gt;Click to add.&lt;/div&gt;
  &lt;/div&gt;
  
  {% endfor %}
  {% endblock %}   
  </code></pre>
  
  <p>This template has been extended from the <code>base.html</code> template file, which is-</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;{% block title %}{% endblock %}&lt;/title&gt;
      {% block head %}{% endblock %}
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Welcome&lt;/h1&gt;
      {% block content %}{% endblock %}
      {% block footer %}
      &lt;hr&gt;
      &lt;p style="display:block&gt;Footer.&lt;/p&gt;
      {% endblock %}
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's my <code>views.py</code> function - </p>
  
  <pre><code>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')
  </code></pre>
  
  <p>But the click event doesn't bind to the div with the id plus. I've tried changing <code>bind()</code> to <code>on()</code> but with no luck.</p>
  
  <p>Thinking this was caused because the document was probably not being ready, I also tried <code>$(document).on('click','#plus',function () {  });</code> , yet it didn't do anything.</p>