变量不会在jquery click函数中更改

Question

I have a list of most 17 recent entries from a db table and wanna use jquery/ajax to have a next button that loads the next 17 entries when you click it. It passes the 17 variable to the .load which works fine first time around (this is later used as mysql limit), but then I try to increase the start variable with 17 so that next time I click it would pass 34 to the .load (so it loads next 17 again) but this doesn't work, it simply loads same 17 again on 2nd, 3rd ect. click (so nothing changes). Reading other questions this should be the right way to use global variables by setting it with var and using it without var inside the function.

<script>  
var start = 17;  
var loadUrl = '<?php echo site_url('welcome/battles'); ?>';  
$("#latestbattlesnext").click(function () {  
    $('#left').load(loadUrl + "/" + start);  
    start = start + 17;  
});  
</script>  

Answer 1

Is your site being refresh on any of these loads? Whatever is in the <script> tags is going to be refreshed as soon as the page it's loaded on is refreshed (obviously).

This is the right way to do it as far as I can tell.

Maybe double check this line:

$('#left').load(loadUrl + "/" + start);

To make sure it's not reloading any of the <script> on the page.

Answer 2

The syntax is right, aren't you setting the start var inside the .load function?

try changing the name of start inside the given script.

Answer 3

Try this method:

var start = 17;  
var loadUrl = '<?php echo site_url('welcome/battles'); ?>';  
$("#latestbattlesnext").click(function () {
    $.ajax({
        url: loadUrl + '/' + start,
        type: 'get',
        dataType: 'html',
        success: function(data){
            $('#left').html(data);
            start = start + 17;
        },
        error(jqXHR, textStatus, errorThrown){
            console.log(textStatus + ' -- ' + errorThrown);
        }
    });    
});

Answer 4

Increment the start variable either before the call to load or in the callback.

var start = 17;  
var loadUrl = '<?php echo site_url('welcome/battles'); ?>';  
$("#latestbattlesnext").click(function () {  
    start = start + 17;
    $('#left').load(loadUrl + "/" + start);  
}); 

Or

var start = 17;  
var loadUrl = '<?php echo site_url('welcome/battles'); ?>';  
$("#latestbattlesnext").click(function () {  
    $('#left').load(loadUrl + "/" + start, function() {
         start = start + 17;
    });
}); 

Answer 5

You can try to use the load callback

var start = 17;  
var loadUrl = '<?php echo site_url('welcome/battles'); ?>';  
$("#latestbattlesnext").click(function () {  
   $('#left').load(loadUrl + "/" + start,function(){start = start + 17;});  
});