将选择器传递给 dialog.position() 无法按预期工作答案

【问题标题】：Passing a selector to dialog.position() does not work as expected将选择器传递给 dialog.position() 无法按预期工作
【发布时间】：2014-09-19 22:53:32
【问题描述】：

我正在使用 jquery-ui 1.11.0 版来创建对话框。我可以按预期创建一个对话框：

onClick: function(e){
  $('#result').dialog({height:400, width:315, position:{at:"center", of:"#"+e.key}})
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function () {
    if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
      response = xmlhttp.responseText;
      $('#result').dialog().html(response);
    }
  };
  xmlhttp.open("GET", "floorplan.php?cube=" + encodeURIComponent(cubes[e.key]), true);
  xmlhttp.send();
}

对话框打开并按预期分配响应。但是，即使我已将选择器传递给位置选项，对话框的位置仍默认为窗口的中心。

我已使用 console.log() 和 alert() 来验证 e.key 是我单击以触发此事件的区域元素的 ID。

有什么建议吗？ documention 说我应该能够将 Selector 传递给 position(of:) 选项。有没有其他人能够让它按预期工作？

【问题讨论】：

工作完全符合预期here，你能在小提琴中重现它吗？题外话：另外，response 是 unclojured，heigh 可能拼写错误，而 .html() 看起来很容易发生 xss
您如何建议我转义响应以防止 XSS？你能解释一下“unclojured”是什么意思吗？
它在 jsfiddle 中按预期工作。我想我将不得不继续对我的代码进行故障排除。我非常期待您对 clojure 和转义 HTML 以防止 XSS 的建议。
这主要是我的吹毛求疵。对于response：它是accessible outside its function's closure*。 可能有种情况是故意的，但在您的情况下，您似乎忘记了前面的var。至于.html()，完全看你的数据模型；如果您进行适当的服务器验证，您可能没问题。无论如何，通用约定是use .text() 用于显示 ajax 数据
太棒了。非常感谢您简洁而礼貌的建议。尽管它在 JSfiddle 中按预期工作，但仍然无法获得我的对话框的正确位置。我无法想象我在 JSfiddle 中采购的版本与我在代码中采购的版本相比，这种行为会发生太大变化。

标签： jquery-ui jquery-ui-dialog

【解决方案1】：

在jsfiddle 中按预期工作。

我确实最终使用了点击事件来确定对话框的位置，但无论出于何种原因，它都被双重包装：

$('#result').dialog({height:100, width:315, position:{my: "left top", at:"right bottom", of:e.e}});

【讨论】：