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

Answer 2

您似乎没有将 HTML附加到DOM 以使其正常工作..''

在将其分配给Do = ialog之前将其附加到正文并且它应该有效..

var html = '<div id="imageSelectionDialog"> ' + 
            //other html  ;

$('body').append(html);

var NewDialog = $("#imageSelectionDialog");

// Code to Initialize the dialog

jQueryUI对话框不显示

2 个答案: