0

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

我想我明白发生了什么，那就是我的变量被新值覆盖了。我该如何解决？函数的每个实例不应该有自己的一组变量吗？现在在我看来变量（init_elem，closest_td，closest_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)
4

1 回答 1

1

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

你可以在这里了解 JavaScript 中的变量范围 什么是 JavaScript 中的变量范围？

于 2012-07-10T11:39:46.443 回答