.click is not triggered once change from .on

Question

I have below code

$(document).on('click','#container.pagination .active', function(){

                    var page = $(this).attr('p');
                    loadData(page);
                });

returned error of

Uncaught TypeError: Object # has no method 'on'

And I found once I disable JQuery UI 1.9.0 which use JQuery 1.8.2, problem will be resolved. But the JQ UI is vital part of my project so its not able to be removed from the page.

I tried an alternative that can help me achieve the same result without using .on, but seem its not even triggered. Is there any syntaxual mistake? I replaced

$(document).on('click','#container.pagination .active', function(){

with

$('#container .pagination .active').click(function(){

So now its like this:

$('#container .pagination .active').click(function(){
                    alert(loadData(page));
                //$(document).on('click','#resultBox .pagination .active', function(){
                    var page = $(this).attr('p');
                    loadData(page);

                    //echo $page;
                });  

However, the function is not even triggered...

Is there a difference when I use the .on VS .click in this senario and that is the cause of its mal-function?

=========A bit update on troubleshooting=================== Here is the further info I found in the error report by Chrome Browser:

Uncaught TypeError: Object #<Object> has no method 'on' jq_iface_testScores_with_pagination.js:176
(anonymous function) jq_iface_testScores_with_pagination.js:176
c.extend.ready jquery.tools.min.js:38
L jquery.tools.min.js:45

Does it means it also deals with jquery tools as well....This is getting wild... Please help.

====Most current findings--ACTUAL ISSUE FOUND! how to resolve it?============ As previous error found, the actual problem lays with JQ Tools 1.2 which utlizie JQ1.7.2. I think somehow it contradict with my JQ1.9.1's .on function. I tried in multiple pages. Its tested that even simply load the JQTool 1.2 will cause problem without even actually using it. How can I resolve this issue without remove jquerytool 1.2? The same error msg was returned every time.

==RESOLUTION====== After smerny's persistent help, I came to a resolution, that finally, the problem is actually deal with OUTDATED jquery.tool library. The problem is cause beacause the jq.tool lib was 1.2.3 instead of 1.2.7. Sometimes, the things are just so simply but take long time to understand and explore.

Aagain, thanks smerny! Here is your rep you deserved :)

Thank You!

Answer 1

The difference between

$(document).on('click','#container .pagination .active', function(){

and

$('#container .pagination .active').click(function(){

Is that in the first one, it uses delegation. This means that the elements in the selector do not have to be there before the bind is made.

In the second one, the elements will need to be there before the bind is made.

If $(document) isn't working, try selecting the body instead:

$("body").on('click','#container .pagination .active', function(){

This is only necessary if you are dynamically loading these elements at some point... if they are loaded right away, then I'd assume you just need to wrap your code in a $(document).ready( function() { ... }) block:

$(document).ready( function() {
    $("body").on('click','#container .pagination .active', function(){
    ...
});

Answer 2

These are the possible options:

 $(selector).live(events, data, handler); // jQuery 1.3+
    $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
    $(document).on(events, selector, data, handler); // jQuery 1.7+