Question

我正在尝试做一些看起来（至少对我来说）做一件相当容易，常见的事情。

这是我在网页上获得的HTML：

<div class="allergiesDiv">
    <div>
        <span class="editButton">Allergies</span><br />
    </div>
        <span>Allergies</span>
    </div>
</div>

我将第一个<span>转换为带有$('.editButton').button()的jQuery按钮。（我在页面上有很多对。）

我尝试做的事情如下：

单击该按钮时，它会加载一个jQuery对话框，其中包含加载到<textarea>后面的跨度值。（奖励：当加载对话框时，我希望聚焦<textarea>并突出显示所有文本。）
用户可以编辑该值，然后点击“确定”。
当用户点击“确定”时，对话框将被解除，输入的新值将用于替换范围的旧值。

这是我正在尝试使用的代码（在IE中可以正常使用，但在Mobile Safari和Chrome for PC中有效）：

注意：我一直在修改代码，试图解决每个问题。我有这个工作，至少在IE中。

// How I get the button and bind to the click event
$('.editButton')
    .button({icons: {primary:'ui-icon-pencil'} })
    .click(EditClicked);

// 'Edit' button click handler
function EditClicked() {
    var span = $(this).parent().next().children().first();
    var text = span[0].innerText;
    var dialog = $('<div>').prop('title', 'Edit: ' + $(this).text());
    var textArea = $('<textarea>').css('width', '98%').prop('rows', '4').html(text);
    textArea.appendTo(dialog);

    var windowWidth = $(window).width();
    var buttonTop = $(this).button().offset().top;
    $(dialog).dialog({ 
        modal: true, 
        minWidth: windowWidth / 2, 
        position: ['center',buttonTop], 
        buttons: {
            'Ok' : function () {
                OKClicked(span);
            },
            'Cancel' : function () {
                $(this).dialog('close').remove();
            }
        }
    });
    textArea.focus().select();    
}

// Dialog 'OK' button click handler
function OKClicked(span) {
    var text = $(this).find('textarea')[0].innerText;
    span.html(text);
    $(this).dialog('close').remove(); 
}

当它到达var buttonTop...时，它当前被破坏，错误消息为“按钮未定义”。我还没弄清楚为什么会这样（我曾经在该方法中有一个名为'button'的变量，但它现在已经消失了。不确定这是否是一个缓存问题。）

除此之外，任何人都可以看到我的流程出了什么问题？看起来我对闭包有一些误解，但是我还不够用JavaScript来理解如何解决这段代码。

Answer 1

怎么样

var buttonTop = $(this).offset().top;

Answer 2

~~我不确定，$('<div>')是jQuery的正确语法。请尝试使用$('div')。~~
当您使用$(this).button()时 - 您尝试调用button对象的$(this)方法。好像是一个小虫。

防止在jQuery / JavaScript中关闭

2 个答案: