Question

I am trying to write a jQuery Ajax function, to reduce the amount of code in the page because the script is called a few times in the page. I can’t seem to get it to work. Here is the code i have:

var loadURL = $(this).attr('href');
function load(){
$.ajax({
    url: loadURL,
    type: 'GET',
    cache: true,
    data: {
        delay: 4
    },
    success: function(data) {
        $('#load').html(data)
    }
    });
return false;}
$('#one').click(function(){ load(); });
$('#two').click(function(){ load(); });
$('#three').click(function(){ load(); });
<a href="one.php" id="one">Two</a>
<a href="two.php" id="two">Two</a>
<a href="three.php" id="three">Two</a>

can anyone guide me here please?

Answer 1

i think the way you are getting href is wrong

function load(item){
var loadURL = $(item).attr('href');
$.ajax({
    url: loadURL,
    type: 'GET',
    cache: true,
    data: {
        delay: 4
    },
    success: function(data) {
        $('#load').html(data)
    }
    });
return false;}
$('#one').click(function()
{ 
load($(this)); 
return false; //you should mention return false here
});