从 .on 更改后不会触发 .click

Question

我有以下代码

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

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

返回错误

Uncaught TypeError: Object # has no method 'on'

我发现一旦禁用使用 JQuery 1.8.2 的 JQuery UI 1.9.0，问题就会得到解决。但是 JQ UI 是我项目的重要组成部分，因此无法从页面中删除。

我尝试了一种替代方法，它可以帮助我在不使用 .on 的情况下获得相同的结果，但似乎它甚至没有被触发。有语法错误吗？ 我换了

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

与

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

所以现在是这样的：

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

                    //echo $page;
                });  

然而，这个功能甚至没有被触发……

当我在这个场景中使用 .on VS .click 时是否有区别，这是其故障的原因？

=========故障排除更新=================== 以下是我在 Chrome 浏览器的错误报告中找到的更多信息：

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

这是否意味着它也处理 jquery 工具......这越来越疯狂...... 请帮忙。

====最新发现--发现实际问题！如何解决？============ 正如之前发现的错误，实际问题在于使用 JQ1.7.2 的 JQ Tools 1.2。我认为它与我的 JQ1.9.1 的 .on 功能相矛盾。我尝试了多个页面。经过测试，即使只是简单地加载 JQTool 1.2 也会导致问题，甚至没有实际使用它。 如何在不删除 jquerytool 1.2 的情况下解决此问题？每次都返回相同的错误信息。

==分辨率====== 在smerny的坚持不懈的帮助下，我得出了一个解决方案，最终，问题实际上是处理OUTDATED jquery.tool library。 问题是因为 jq.tool 库是 1.2.3 而不是 1.2.7。 有时，事情就是这么简单，但需要很长时间才能理解和探索。

再次感谢smerny！这是你应得的代表:)

谢谢！

Answer 1

两者的区别

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

和

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

在第一个中，它使用委托。这意味着选择器中的元素在绑定之前不必存在。

在第二个中，元素需要在绑定之前存在。

如果$(document) 不起作用，请尝试选择正文：

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

仅当您在某些时候动态加载这些元素时才需要这样做...如果它们立即加载，那么我假设您只需将代码包装在 $(document).ready( function() { ... }) 块中：

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

Answer 2

这些是可能的选项：

 $(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+