javascript - 从 .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 的不懈帮助下，我最终决定，问题实际上是处理过时的 jquery.tool 库。 问题是因为 jq.tool lib 是 1.2.3 而不是 1.2.7。有时候，事情就是这么简单，但需要很长时间才能理解和探索。

再次感谢smerny!这是您应得的代表:)

谢谢!

Answer 1

两者的区别

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

和

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

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

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

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

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

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

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