javascript-用jquery更新多个锚aysc时遇到麻烦

所以我像这样在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>

解决方法:

是的,问题在于您编写的锚变量已“提升”到全局范围.简化示例请参见this jsfiddle.

您可以通过在变量前面放置一个var来解决此问题,因此将其范围限制为该函数：

function geninvoice() {

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

您可以在此updated version of the above fiddle看到修复

注意,这只会帮助您在函数内进行作用域设置.即使使用var声明了以下示例中的x变量,它也会被提升到全局范围的顶部：

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);

见this JSFiddle