jQuery / MVC3函数html onclick仅工作一次

Question

Ok, i have a function that is called when in image is clicked. For some reason it is only calling one time when i click it and I'm a little puzzled as to why.

Here's my javascript (combined with a small amount of razor), essentially all it does is call a post method in the controller that returns a partial view and updates that partial view.

function mFunction() {
    @{ x = x = 1; }
    $.post('/Home/_MyPartial', { 'param1': "@x" }, function(result) {
        $('.myUpdatedDiv').html(result);
        $('.anotherDiv').empty();
        $('.anotherDiv').append('@x');
    });
}

Then i have my tag like this

<a href="#" onclick="mFunction()">Hello</a>

It updates the view perfectly fine as i expect it to, with some goofy exceptions.

1. It does hit the controller every time it is clicked (multiple times). So i know it's working that way
2. The page itself does not get updated and nothing gets replaced a second time. The controller successfully returns the partial view, but the javascript only updates it once.

So i'd appreciate any help as to why it isn't updating more than once.

thanks

edit

Ok lets say i do this:

@{ int x = 0; }

<script type="text/javascript">
function tester() {
    @{ x++; }
    $('.H').empty();
    $('.H').append('@x');
}
</script>

<div class="H"></div>
<a href="#" onclick="tester()">Click</a>

Clicking on the tag will display '1' and clicking it on it will always display '1'. Does this have something to do with the razor code only rendering once or something? is there a way around it?

Answer 1

try this

<script type="text/javascript">
var indx = 1;//Set this to be the value from the model you want to display 
function tester() {
    $('.H').empty();
    $('.H').append(indx);
indx++;
}
</script>

<div class="H"></div>
<a href="#" onclick="tester()">Click</a>

Answer 2

Razor code is only run on the server, when the page has been downloaded all you have is the javascript with the Razor values output in place so your second example will look like this:

<script type="text/javascript">
function tester() {
    $('.H').empty();
    $('.H').append('1');
}
</script>

<div class="H"></div>
<a href="#" onclick="tester()">Click</a>

This is why it will only ever append 1.

Answer 3

I suggest you use Firefox's Firebug or the Web Console (Ctrl+Shift+K) to look at the asynchronous calls. You'll know there if the browser is actually hitting the server on every click (and you can even see with what parameters whether POST or GET). It looks like it should be contacting the server everytime, but because state is not kept between calls, you are always getting the same result after the 1st call (because you are always sending the same X value after the first call).