href javascript function call

Question

I am trying to call a function on href but its showing undefined function but the function itself is working when I call it inside album loop. Is there some other way of calling the function after appending the href? I tried using jquery onclick with the id of anchor but that doesn't work either and got no error. Any idea how I should be calling?

function getPhotosByAlbumID(albumID){
    FB.api('/'+ albumID + '/photos',{ limit: 5000, fields: 'source' }, function(photos) {
        $(photos.data).each(function(index, value){
            console.log(value.source);
        });
    });
}

FB.api('/me/albums',{ limit: 5000, fields: 'id,name,count,cover_photo,link' }, function(me_album) {
    $(me_album.data).each(function(index, value){                           
        FB.api('/'+value.id+'/picture',{ limit: 5000 }, function(picture) {                     
            $('#facebook-cover').append('<li id="'+value.id+'"><a href="javascript:getPhotosByAlbumID('+value.id+');" id="album"><img src="'+picture.data.url+'" /></a></li>'); 
        });
    });
}); 

Error: Uncaught ReferenceError: getPhotosByAlbumID is not defined

All appended like so..

<ul id="facebook-cover">
<li id="4758611198834"><a href="javascript:getPhotosByAlbumID(4758611198834);" id="album"><img src="image-link"></a></li>   
</ul>

Answer 1

try

var li=$('<li id="'+value.id+'"></li>');
var anchor=$('<a href="#" id="album"></a>');
anchor.click(function(){
getPhotosByAlbumID(value.id);
return false;

});
var img=$('<img src="'+picture.data.url+'" />');

anchor.append(img);
li.append(anchor);

this way your click event must work. unless there is any error inside getPhotosByAlbumID(); you can also return false from the same function

Answer 2

My guess would be that the js-file is not properly included in the page where the html is. One easy way of testing if this is the problem would be to just put the javascript in the same file as your links. If this solves the problem, you have an include error.

Like so:

<script type="text/javascript">
function getPhotosByAlbumID(albumID){
    FB.api('/'+ albumID + '/photos',{ limit: 5000, fields: 'source' }, function(photos) {
        $(photos.data).each(function(index, value){
            console.log(value.source);
        });
    });
}

FB.api('/me/albums',{ limit: 5000, fields: 'id,name,count,cover_photo,link' }, function(me_album) {
    $(me_album.data).each(function(index, value){                           
        FB.api('/'+value.id+'/picture',{ limit: 5000 }, function(picture) {                     
            $('#facebook-cover').append('<li id="'+value.id+'"><a href="javascript:getPhotosByAlbumID('+value.id+');" id="album"><img src="'+picture.data.url+'" /></a></li>');
        });
    });
});
</script>

<ul id="facebook-cover">
<li id="4758611198834"><a href="javascript:getPhotosByAlbumID(4758611198834);" id="album"><img src="image-link"></a></li>   
</ul> 

Answer 3

I notice you originally had a significant amount of indentation in your JS code. Is your getPhotosByAlbumID function within some other function perhaps? Something like this:

var module = (function () {
    ...
    function getPhotosByAlbumID(albumID){
    ...
}

If so you need to make it accessible. Here is some info on the module pattern which may be useful.