Question

I am having problems implementing a dynamic number of .live() events.

There is a loop to determine how many pages to create links for returned from an ajax call.

Basically I get 1 of 3 (-1, 0, [object Object]) results depending on how I pass the number of pages inside the live event.

Here is how it stands now, where it only returns 0 for each live event. To get -1, I would remove the contractPage declaration and put that in the net.tsn.contract.log function, or [object Object] I would pass page in the live’s handler function.

for (var page=(contractId['pages']-1); page>=0; page--) {
    $("#jpgLinks").prepend("<span><a href='#' id='jpgLink"+page+"'><img src='img/JPG-Link_con-" + (page+1) + ".png' alt=''><br>Page " + (page+1) + "<\/a><\/span>");
    var contractPage = contractId['contract'] + "-" + page;
    $('#jpgLink'+page).live('click', function() {
        showWorkingDialog();
        net.tsn.contract.log(contractPage, "DOWNLOAD_JPG", '<?php echo $_GET['lead']; ?>');
    });
}

Answer 1

Ah, I see what the problem is here. You need to make a closure to close the value of page for each live() event.

Put this function somewhere in your code (before the for loop):

function _contractPage(contractPage, page){
    return function(){
        contractPage = contractPage  + "-" + page;
        showWorkingDialog();
        net.tsn.contract.log(contractPage, "DOWNLOAD_JPG", '<?php echo $_GET['lead']; ?>');
    }
}

And then change your for loop like so:

for (var page=(contractId['pages']-1); page>=0; page--) {
    $("#jpgLinks").prepend("<span><a href='#' id='jpgLink"+page+"'><img src='img/JPG-Link_con-" + (page+1) + ".png' alt=''><br>Page " + (page+1) + "<\/a><\/span>");
    var contractFunc = _contractPage(contractId['contract'], page);
    $('#jpgLink'+page).live('click', contractFunc);
}

Example: http://jsfiddle.net/T8UjA/