Why is my global variable null? javascript/jeditable

This is a really strange one. I'll let the code do the talking.

var update_address = location.href+"/update.json"
var currentPageId = null;

$(document).ready(function() {

    $('.editable-td').click(function(){
        currentPageId = this.id;
        console.log(currentPageId);
    });

    $('.editable-td').editable(update_address, {
        submitdata:{
            pageID: currentPageId //This is the part to watch
        },

        type 开发者_Go百科     : 'textarea',
        cancel    : 'Cancel',
        submit    : 'OK',
        tooltip   : 'Click to edit...'
    });
});

The first function defines the variable as currentPageId and it prints to the console fine. But when I try to pass it through to the jeditable function it comes out as null. any ideas?

---

I have used the plugin before. Use a function instead of the url:

$('.editable-td').editable(function(value, obj){
        var self = this; //this is the `.editable-td` that was clicked
        console.log(self, obj, value);
        //now use jQuery's $.post with the url and the result
        $.post(update_address, {pageID: self.id, submit_value: value}, 
               function(data){
                    //do something with data
               });
        return value;
},{
    type      : 'textarea',
    cancel    : 'Cancel',
    submit    : 'OK',
    tooltip   : 'Click to edit...'
});