Javascript scope with bootstrap

Question

I have following code:

jsFiddle

<a id="test">Click me</a>
<a id="field2" style="border: 1px solid green;">0</a>


var i = 0;
$('a#test').click(function() {
     i += 1;
     var a = i;

     $('a#test').popover({
         trigger: 'manual',
         placement: 'right',
         content: function() {
            var message = "Count is" + a;
              return message;
         }
    });
    $('a#test').popover("show");
    $('a#field2').html(a);
});

When clicking on Click Me Only one value gets incremented, but if we change message line to:

var message = "Count is" + i;

Both values gets incremented.

Why this is happening?

Answer 1

The popover construction happens only once, during the first click event, because you cannot reconstruct a popover without destroying the old one.

So in your case :

• "Count is " + a, you construct the popover callback from the a variable with the current value of a. Because you are 'recreating' a at each click, the reference used will be the one of the first a variable created (during the first click). This reference will be lose once you'll be out the event function, so you won't be able to update it and only the first value will be used in the callback.
• "Count is " + i, you construct the popover callback using the global variable i which will be available wherever and whenever you want, so you can modify it.

Obviously the #field2 will show the current value because you're using the current a variable and not the old one from the first click.

To understand a bit more :

1. First click : i = 1, a = 1. You're sending a, which could be seen as a1 (first a) to the callback function). Then you go out the event function, so the a variable is destroyed BUT 'its memory' (what it was pointing in fact, everything is reference in javascript), so in memory you still have something like a0 -> 1 which is used in the callback.
2. Second click : i = 2, a = 2. You're NOT sending a to the popover constructor because you've already created the popover, so it is still a0 which is used in the callback function. Then you go out the event function, and now the a variable is pointing to its value.
3. Third click : Same as second, and etc.

Answer 2

The popover() call within the click event is not recreating the popover on each click. It is only created on the first click, any further recreate attempts are ignored.

Both are incremented when you use i in the content function because i is delcared as a global, and it is being modified on each click. The content function is not taking a snapshot of i, it is referencing the updated variable every time content is called.

When you change to use a in the content function, it doesn't get incremented because content is only seeing the first time a is declared due to a being a local variable (and because content is only created once).

This can be tested by destroying the popover on each click, which now means the popover is recreated on each click, which results in both being incremented:

Demo

Note: the demo uses the latest Bootstrap because 2.02 in your fiddle doesn't support the destroy method.

Answer 3

after declaring the var a outside the click function() your problem is solved.I am not sure why this is happening but it seems that the a inside the content function has a different value then a outside the content function after doing the above mentioned changes you get your results.Hope it helps.Updated fiddle is here