Jquery 对话框中显示的 Javascript 函数答案

【问题标题】：Javascript function shown in Jquery dialogJquery 对话框中显示的 Javascript 函数
【发布时间】：2014-08-08 14:12:09
【问题描述】：

我想要一个带有 javascript 函数的 Jquery 对话框，它显示成分列表（成分来自数据库，这就是我在 js 函数中使用它的原因）。我有这个按钮：

<div id="dialog">
    //WANT showKeyIngredients() to show up in here, the dialog box
</div>
<div id="confirm-dialog">
    <a href='#' class="buttonstyle2" onclick="showKeyIngredients();">
        Browse
    </a>
</div>

这是我的 jQuery：

$(function () 
{
    $("#dialog").dialog({
        autoOpen: false,
        bgiframe: true,
        autoOpen: false,
        resizable: false,
        minHeight: 250,
        width: 700,
        height: 250,
        modal: true
    });

    $("#confirm-dialog").click(function () 
    {
        $("#dialog").dialog("open");

    });
});

我很抱歉这可能很混乱，因为我是 jQuery 新手，并且一直只是复制和粘贴东西。我什至不确定这是否可能。我一直在到处研究，没有发现任何东西。我想要的只是显示在对话框中的 showKeyIngredient() 函数。 html中的onclick根本没有出现在对话框中。

http://jqueryui.com/dialog/

我喜欢这里的对话框，但希望我的 showKeyIngredients() 函数显示在其中。并且有一个按钮可以弹出这个对话框。

【问题讨论】：

对话框只是另一个div。如果要在其中插入信息，请在对话框 div 中选择适当的子元素并附加到该子元素。您需要显示其他代码，例如showKeyIngredients，以获得更好的答案。

标签： javascript jquery html jquery-ui dialog

【解决方案1】：

非常粗略和现成的答案，但这是您正在寻找的那种东西吗？：

$("#dialog").dialog();
$("#dialog").html('<div> Some element with showKeyIngredients returned stuff </di>')

更充实： http://jsfiddle.net/npj3xbk8/

您可以将 .html() 文本替换为您从 showKeyIngredients 返回的内容。（为简单起见，我还删除了所有对话框设置，但它们可以重新添加）

【讨论】：

【解决方案2】：

您想在对话框正文中显示的任何内容，只需将其放入段落(<p></p>) 标记中即可。

试试这个：

<div id="confirm-dialog">
  <p>
    <a href='#' class="buttonstyle2" onclick="showKeyIngredients();">
        Browse
    </a>
  </p>
</div>

或者

<div id="dialog">
  <p>
    <a href='#' class="buttonstyle2" onclick="showKeyIngredients();">
        Browse
    </a>
  </p>
</div>

我还在我的网站上的许多地方使用过这个对话框。而且你不需要做任何额外的事情。

工作Fiddle。

【讨论】：