I'm trying to use ajax to load certain pages, but the 'on-click' is not working. I created an init() function so one of the pages auto-loads when the page gets loaded. That works! However, when I click on any of the links, nothing gets loaded. In fact, nothing happens. Once a link is clicked, it's not going to the jQuery script. Any suggestions will be greatly appreciated.
Here are my links...
<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>
Here is my jQuery script...
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);
});
}();
Change this line:
var page = $($this).attr("id");
Into this:
var page = $(this).attr("id");
Tip:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.