проблема обновления нескольких якорей aysc с помощью jquery

Question

Так что у меня есть все эти ссылки в HTML, как это

<a href="#ajax" class="invlink" competition_id="532">Gen Invoice</a>
<a href="#ajax" class="invlink" competition_id="534">Gen Invoice</a>
<a href="#ajax" class="invlink" competition_id="535">Gen Invoice</a>

тогда я написал javascript, который привязывается к событию click и я хочу, чтобы он отправил запрос ajax и заменил якорь возвращаемым текстом. но если я нажал на несколько ссылок, так что некоторые из них работают асинхронно, то он не обновляет все якоря с возвращенным текстом, а только последний якорь, на который я нажал.

Я предполагаю, что переменная привязки перезаписывается при каждом ее запуске. Как бы я структурировал свой код таким образом, чтобы при каждом срабатывании события click обновлялся правильный привязчик при завершении?

вот код JavaScript

<script type="text/javascript">

    $(document).ready(function() {
        // bind geninvoice function to all invlink's
        $('.invlink').bind('click', geninvoice);
    });


    function geninvoice() {

        // stop double clicks
        anchor = $(this);
        anchor.unbind('click');

        competition_id = $(this).attr('competition_id');

        $.ajax({
            type: "POST",
            url: "<?php echo url::site('manage/ajax/geninvoice'); ?>/"+competition_id,
            dataType: "json",
            beforeSend: function() {
                anchor.addClass("loading");
            },
            success: function(response, textStatus) {
                anchor.replaceWith(response.invoice_number);
            },
            error: function(response) {
                alert("Unknown Error Occurred");
                anchor.bind('click', geninvoice); // rebind if error occurs
            },
            complete: function() {
                anchor.removeClass("loading");
            }
        });
    }

</script>

Answer 1

Да, проблема в том, что ваша переменная anchor в том виде, в каком она написана, «поднята» в глобальную область видимости. См. этот jsfiddle для упрощенного примера.

Вы можете исправить это, поместив var перед переменной, так что ее область действия будет ограничена функцией:

function geninvoice() {

    // stop double clicks
    var anchor = $(this); //<-- put a var here

Вы можете увидеть исправление в этой обновленной версии вышеупомянутой скрипки

Обратите внимание, это поможет вам только для определения объема функций. Переменная x в следующем примере будет перемещена в верхнюю часть глобальной области, даже если она была объявлена ​​с var:

var a = 1;
var b = 1;

if (a === b){
   var x = 0;
}

alert(x); //alerts '0'

преимущества области видимости внутри функций объясняются тем, что мы часто видим следующее соглашение о плагинах jQuery:

(function($){
    //plugin code
    //all variables local to the invoked anonymous function
})(jQuery);

См. это JSFiddle