'undefined' is not a function (evaluating '$(document).on')

Question

I am trying to use this script:

<script>
var original_value = Number($('#ProductPrice').text().replace(/[^0-9.]+/g,""));

$(document).on('keyup', '#ProductPrice', function() {
if (Number($('#ProductPrice').text().replace(/[^0-9.]+/g,"")) > original_value) {
    $("#ProductPrice").css("color","red");
} else {
    $("#ProductPrice").css("color", "black");   
}
});
</script>

I keep getting an error:'undefined' is not a function (evaluating '$(document).on')

Help?

What version of jquery you are using? I guess on is not available for the versions earlier to 1.7 — PSL, Sep 13 '13 at 19:57
Is anything conflicting/overwriting jQuery's `$` (ex. prototype)? — forivall, Sep 13 '13 at 19:59
@Sergio, it is built into our CMS, BigCommerce, so yes, it is loaded correct. — user2687646, Sep 13 '13 at 20:03
I was unable to get this script to work without breaking lots of things, but I did come up with a solution. Thanks for all the help! — user2687646, Sep 25 '13 at 18:40

Sergio · Answer 1 · 2013-09-14T07:40:13.560

I have a feeling you have jQuery in no conflict mode, which means the $ is not assigned to jQUery

You can call your code like this:

(function ($) {
    var original_value = Number($('#ProductPrice').text().replace(/[^0-9.]+/g, ""));
    $(document).on('keyup', '#ProductPrice', function () {
        if (Number($('#ProductPrice').text().replace(/[^0-9.]+/g, "")) > original_value) {
            $("#ProductPrice").css("color", "red");
        } else {
            $("#ProductPrice").css("color", "black");
        }
    });
})(jQuery)

You can also just replace all the $ with jQuery;

score 0 · Answer 2 · answered Sep 13 '13 at 20:03

0

Assuming that you are taking the value as input from user in a text box. You need to have a value and not text for the input type text.

var original_value = Number($('#ProductPrice').val().replace(/[^0-9.]+/g,""));

$(document).on('keyup', '#ProductPrice', function() {
if (Number($('#ProductPrice').val().replace(/[^0-9.]+/g,"")) > original_value) {
    $("#ProductPrice").css("color","red");
} else {
    $("#ProductPrice").css("color", "black");   
}
});

This works Fine for me.

answered Sep 13 '13 at 20:03

Akshay Khandelwal

1,570
11
19

Just FYI, the OP has a string of questions all related to the same problem. This was supposed to be on a `contenteditable` element but the OP left it out. – musicnothing Sep 13 '13 at 20:22

score 0 · Answer 3 · edited May 23 '17 at 12:28

0

Seems like you might be loading jQuery in no-conflict mode, or not loading it at all.

See this question & my answer to it:

jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function

edited May 23 '17 at 12:28

Community

1
1

answered Sep 13 '13 at 20:07

Julian

2,814
21
31

'undefined' is not a function (evaluating '$(document).on')

3 Answers3