javascript - Django jQuery not working? - Stack Overflow

admin管理员组

文章数量:1420966

This is what my template looks like:

{% extends 'typer/base.html' %}
{% load url from future %}

{% load staticfiles %}

{% block title %}{{ p_name }}{% endblock %}

{% block body_block %}
<script type='text/javascript'
src='.1.1/jquery.min.js'></script>
<script>
    $('#user_passage_text').on('keyup', function(e) {
        if ( e.which === 13 ) {
        var time = (new Date()).getTime() - $(this).data('time');
        $(this).data('time', 0);
        console.log('Time passed : ' + time + ' milliseconds');

        }else if ( !$(this).data('time') ){
            $(this).data('time', (new Date()).getTime());
        }
    });
</script>

    <h1>{{ p_name }}</h1>
    <p>This passage is {{ p_wlength }} words, {{ p_clength }} characters long.</p>
    {% if passage %}
        <p><blockquote>{{ p_text_body|linebreaksbr }}</blockquote></p>

    {% else %}
        The specified text {{ p_name }} does not exist!
    {% endif %}

    <p>
        Begin typing to start the test.
    </p>
    <textarea id="user_passage_text"></textarea>


{% endblock %}

All I want for this to do is print a message to the console to check that the function is working. The reason I'm confused about it not working is that I can run it on / perfectly fine. So why does the message print there but not when I run the django template?

This is what my template looks like:

{% extends 'typer/base.html' %}
{% load url from future %}

{% load staticfiles %}

{% block title %}{{ p_name }}{% endblock %}

{% block body_block %}
<script type='text/javascript'
src='https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script>
    $('#user_passage_text').on('keyup', function(e) {
        if ( e.which === 13 ) {
        var time = (new Date()).getTime() - $(this).data('time');
        $(this).data('time', 0);
        console.log('Time passed : ' + time + ' milliseconds');

        }else if ( !$(this).data('time') ){
            $(this).data('time', (new Date()).getTime());
        }
    });
</script>

    <h1>{{ p_name }}</h1>
    <p>This passage is {{ p_wlength }} words, {{ p_clength }} characters long.</p>
    {% if passage %}
        <p><blockquote>{{ p_text_body|linebreaksbr }}</blockquote></p>

    {% else %}
        The specified text {{ p_name }} does not exist!
    {% endif %}

    <p>
        Begin typing to start the test.
    </p>
    <textarea id="user_passage_text"></textarea>


{% endblock %}

All I want for this to do is print a message to the console to check that the function is working. The reason I'm confused about it not working is that I can run it on http://jsfiddle/d8c4z300/ perfectly fine. So why does the message print there but not when I run the django template?

• javascript
• jquery
• python
• django

Share Improve this question Follow edited Jan 1, 2015 at 10:57 Aquarthur asked Jan 1, 2015 at 10:48 AquarthurAquarthur 61966 silver badges2020 bronze badges 2

• 1 Are there any errors messages in your browser? How does the out ing html look like? – Daniel Commented Jan 1, 2015 at 11:20
• There aren't any error messages. The out ing html looks like this: pastebin./hm1Ty7Lu. – Aquarthur Commented Jan 1, 2015 at 11:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

you need $(function(){ ... }) (or $( document ).ready(function() { ... }); which is equal, only longer) around your js code:

so:

$(function(){

  $('#user_passage_text').on('keyup', function(e) {
    if ( e.which === 13 ) {
    var time = (new Date()).getTime() - $(this).data('time');
    $(this).data('time', 0);
    console.log('Time passed : ' + time + ' milliseconds');

    }else if ( !$(this).data('time') ){
        $(this).data('time', (new Date()).getTime());
    }
  });

});

fiddle is working because you set it to onload which is almost equal to $(function(){ ... }) here.

本文标签： javascriptDjango jQuery not workingStack Overflow