jQuery-ajax 'on click event‘不工作

Question

我正在尝试使用ajax加载某些页面，但“点击”不起作用。我创建了一个init()函数，以便在页面加载时自动加载其中一个页面。这是可行的！但是，当我单击任何一个链接时，都没有加载任何内容。事实上，什么都不会发生。一旦链接被点击，它就不会转到jQuery脚本。我们将非常感谢您提出的任何建议。

这是我的链接。

  <a href="#" id='add' >Add</a>                
<?php foreach($names as $name): ?>
  <a href="#" id="<?= $name['id']; ?>" class="league"><?= $name['name']; ?></a>
<?php endforeach; ?>

<section id='main'>Main content</section>

这是我的jQuery脚本...

  var app = {      // this is a namespace
        nav: $('a.league'),  // selector
        content: $('section#main')     // section where id='main'
    };

    app.putContent = function(content){
        this.content.html(content);
    }

    app.loadPage = function(page){
        $.ajax({
            url: '../views/security.php',
            type: 'GET',
            cache: false,
            //data:{id: page},  // this works too
            data:"id=" + page,  
            success: function(data){
               app.putContent(data);
            },
            error: function(){
                app.putContent('Could not find page.');
            }
        });
    }

    app.init = function(){
        app.loadPage('add');   // this part works
        app.nav.on('click', function(){ // This part(on click) is not working
            var page = $($this).attr("id"); 
            app.loadPage(page);
        });

    }();

Answer 1

更改此行：

var page = $($this).attr("id"); 

如下所示：

var page = $(this).attr("id"); 

提示：

• 使用浏览器检查器/控制台识别JS代码

中的问题