javascript - jQueryUI 对话框不显示

Question

我正在尝试使用一个函数生成一个 jQuery UI 对话框。该函数由 onClick 事件触发并正在执行，但由于某种原因，对话框不会显示。我确定这很简单。

如果可能的话，我更愿意以这种方式创建对话框，因为从单独的 html 页面加载对话框会导致 chrome 出现同源问题。该代码是可以离线使用的浏览器扩展的一部分，因此这种方式允许在没有同源限制的情况下使用。

我已经创建了一个类似的这种性质的对话框，它在标签之间附加了一个参数。我已经用当前的那个试过了，但没有用。

我在主页中添加了最新的 jQuery ui 和 jQuery 库。

我是 javascript 和 jQuery 的新手，但如果有人能提供一些帮助，我将不胜感激。

谢谢，

乔

function imageSelection() {

var NewDialog = $('<div id="imageSelectionDialog"> ' +

    "<ol id= \"selectable\">" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image1.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image2.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image3.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image4.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image5.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image6.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image7.jpg\"/></li>" + 
        "<li class=\"ui-state-default\"><img src=\"images/stock/image8.jpg\"/></li>" + 
    "</ol>" +

    "<form id=\"pieceSelection\">" + 
         "<div id=\"imageInput\">" + 
             "<input type=\"text\" id=\"image\" value=\"images/stock/walkin.jpg\"" +
                 "title=\"Select an image above or Paste a URL e.g http://server.com/path/to/image.jpg\"/>" + 
         "</div>" +

         "<div id=\"radio\">" + 
             "<input type=\"radio\" id=\"radio1\" name=\"radio\" checked/>" + 
             "<label for=\"radio2\">x3</label>" + 
             "<input type=\"radio\" id=\"radio2\" name=\"radio\"/>" + 
             "<label for=\"radio3\">x4</label>" + 
             "<input type=\"radio\" id=\"radio3\" name=\"radio\"/>" + 
             "<label for=\"radio4\">x5</label>" + 
             "<input type=\"radio\" id=\"radio4\" name=\"radio\"/>" + 
             "<label for=\"radio5\">x6</label>" + 7
             "<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" + 
             "<label for=\"radio6\">x7</label>" +
             "<input type=\"radio\" id=\"radio6\" name=\"radio\"/>" + 
             "<label for=\"radio7\">x8</label>" + 
             "<input type=\"radio\" id=\"radio7\" name=\"radio\"/>" + 
             "<label for=\"radio8\">x9</label>" + 
        "</div>" + 
    "</form>" + 
'</div> ');


NewDialog.dialog({
    autoOpen: false,
    modal: true,
    height: 500,
    width: 500,
    title: 'Choose an image',
    buttons: {
        "Ok": function() {
            $(this).dialog("close");
        }
    }
});

return false;

}​  

Answer 1

你的字符串中似乎有一个意想不到的 7，这使得这个连接无效，导致 Uncaught SyntaxError: Unexpected string。

改变这个:

"<label for=\"radio5\">x6</label>" + 7
"<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" + 

要么这样:

"<label for=\"radio5\">x6</label>" +
"<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" + 

或者这个:

"<label for=\"radio5\">x6</label>" + 7 + 
"<input type=\"radio\" id=\"radio5\" name=\"radio\"/>" + 

此外，如果您希望对话框立即可见，您需要将 autoOpen 设置为 true。

DEMO - 删除 7 并将 autoOpen 设置为 true