Question

我有上面的代码运行并更改图标以加载图标，然后更改为其他图标，如果它成功。无论如何，它在单个实例上工作得非常好;但是，例如，当我点击两个（或更多）时，它将使第一个实例带有加载图标，然后最后一个实例将其图标更改两次。

我想我理解发生了什么，那就是我的变量被新值覆盖了。我该如何解决？函数的每个实例都不应该有自己的变量集吗？现在在我看来，变量（init_elem，nearest_td，nearest_tr）是全局的，因此被覆盖了？

“$（this）”失去了它的上下文，因此我将其分配给变量的原因。我在jqGrid上使用它，因此需要.on（）因为它'通常'不起作用。我试过用$ .proxy;但我之前从未使用它，因为console.log'ing $（this）.html（）显示对话框html而不是锚html，所以我似乎无法正常使用它。

$(document).ready(function() {
    $("#acquire-dialog").dialog({
        autoOpen: false,
        modal: true
    });
});

$(document).on('click','.acquire-confirmation', function(event) {
    event.preventDefault(); 
    init_elem = $(this);
    closest_td = $(init_elem).closest("td");
    closest_tr = $(init_elem).closest("tr");
    process_id = $(this).attr("rel");

    $("#acquire-dialog").dialog('option', 'buttons', {
        "Confirm" : function() {
            restore_html = $(init_elem).closest("td").html();
            $(closest_td).html('<img class="qmark" title="Loading..." src="images/loading.gif">');
            $.post(
                'includes/_add_ajax.php', 
                {section: 'acquire_document', process_id: process_id},
                function(data){
                    $("#ajax_notifications").freeow(data.subject,data.message,{classes: [data.type] });
                    if (data.type == 'success')
                    {
                        $(closest_tr).find("div:first")
                            .removeClass('icon_status_0')
                            .addClass('icon_status_2')
                            .attr('title','You have acquired access to this document.');
                        if (typeof data.status !== "undefined")
                        {
                            var document_status = ['A','B','C'];

                            $(closest_td).prev().html(document_status[data.status]);
                            if (data.status == 1)
                                $(closest_td).html('<a class="qmark" target="_blank" title="Generate a return for this document." href="includes/generate_return.php?id='+ process_id +'"><img src="images/icon_pdf.png" border="0" /></a>');
                            else
                                $(closest_td).html('<img class="qmark" title="You can only generate a return for a document once its been served or a return of non-service has been issued." src="images/icon_question.png">');
                        }
                    }
                    else
                        $(init_elem).closest("td").html(restore_html);
                },
                'json'
            );
            $(this).dialog("close");
        },
        "Cancel" : function() {
            $(this).dialog("close");
        }
    });

    $("#acquire-dialog").dialog("open");

});

这就是我对$ .proxy（）所做的尝试：

$.proxy($("#acquire-dialog").dialog("open"),this);

和

$.proxy($("#acquire-dialog").dialog("open"),$(this));

最后关于事件绑定，虽然我不认为这是正确的：

$(document).on('click','.acquire-confirmation', $.proxy(function(event) { ... },this)); // and $(this)

Answer 1

您应该使用var关键字，否则您的变量将被覆盖

您可以在此处了解JavaScript中的变量范围 What is the scope of variables in JavaScript?

jQuery实例互相覆盖

1 个答案: