0

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

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

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

我把第一个<span>变成了一个 jQuery 按钮$('.editButton').button()。（我在页面上有很多这样的对。）

我想做的是以下几点：

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

这是我正在尝试使用的代码（这在 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 的了解还不够好，无法理解如何摆脱这段代码的扭结。

4

2 回答 2

1

关于什么

var buttonTop = $(this).offset().top;
于 2012-06-26T20:06:05.547 回答
-1
  1. 我不确定，这$('<div>')是 jQuery 的正确语法。尝试$('div')改用。
  2. 当您使用$(this).button()- 您尝试调用对象button的方法$(this)。似乎是一个错误。
于 2012-06-26T20:10:53.540 回答