Why is a variable not being reset in my event handler?

Question

Here's my code:

$(document).ready(function () {
    var default_var = 2;
    var show_var = default_var;
    var total_var = 8;
    var increment_var = 2;


    var start_var = show_var+1;
    var end_var = show_var+increment_var;

    $("a[rel=more]").live("click", function(){

     $("#timeshare-listings li:last").after("<li class='ajax'></li>");
     $("#timeshare-listings li.ajax").load("http://www.goodbuytimeshare.com/listings/ajax/"+start_var+"/"+end_var+"/");
     $("#timeshare-listings li.ajax").removeClass("ajax");

     var show_var = end_var+1;

     return false;
    });
});

The first time I click the button it does exactly what I want. Unfortunately, for some reason, show_var never changes its value. Why not? What do I have to do to make it change?

Answer 1

 ...
var show_var = default_var;
 ...

$("a[rel=more]").live("click", function(){
     ...
    // declares and initializes entirely new variable named show_var 
    // that will never be used again...
    var show_var = end_var+1;
     ...
});

You're re-declaring show_var in the handler for the live click event. Don't do that - just reference the one in the outer scope, and it should do what you want...

 ...
var show_var = default_var;
 ...
$("a[rel=more]").live("click", function(){
    ...
    show_var = end_var+1; // update value in outer scope
    ...
});