Question

您好我在尝试将图片添加到对话框时遇到问题，基本上当用户点击表格中的单元格时会调用我的对话框。

    <td class="dialog">English</td>

然后链接到Div

<div id="dialog" title="LessonSelected">

</div>

接下来是我的JQuery：

$(function() {
    $( ".dialog" ).click(function(){        
        $('#dialog').html($(this).html()); 
        $('#dialog').dialog({
            resizable:false,
            buttons: {
                "Enrol": function()
                {
                    $(this).dialog('close');
                    choice(true);
                },
                "Cancel Enrol": function()
                {
                    $(this).dialog('close');
                    choice(false);
                }
            }
        });
    });
  });

然而，当我尝试在div中添加img标记时，图像出现在界面上而不是在对话框中，当单击单元格时，单元格中的文本会自动出现在对话框中，这不是我需要的内容我想获得价值，虽然它只是自动出现并且是JQuery的新手我不知道如何格式化它或在它之前或之后添加更多文本。有人能够诊断我的问题吗？

Answer 1

创建对话框autoOpen = false，然后在单击

时将其打开

HTML

<div id="dialog" class="dialogBox" title="LessonSelected">
    <img src="https://www.google.com/logos/2014/worldcup14/opening/cta.png" />
</div>

JQuery的

$(function() {

    $('#dialog').dialog({
        resizable:false,
        autoOpen: false,
        buttons: {
            "Enrol": function()
            {
                $(this).dialog('close');
                choice(true);
            },
            "Cancel Enrol": function()
            {
                $(this).dialog('close');
                choice(false);
            }
        }
    });

  $( ".dialog" ).click(function(){        
    $('#dialog').dialog("open");
  });
});

FIDDLE：http://jsfiddle.net/F9uR3/

Answer 2

选中 Demo Fiddle ：使用jQuery .append()

$(function() {
    $( ".dialog" ).click(function(){ 

        $('#dialog').append('<img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/><br/>').append($(this).html());

       //append image through JS

        $('#dialog').dialog({
            resizable:false,
            buttons: {
                "Enrol": function()
                {
                    $(this).dialog('close');
                    choice(true);
                },
                "Cancel Enrol": function()
                {
                    $(this).dialog('close');
                    choice(false);
                }
            }
        });
    });
  });

OR

<div id="dialog" title="LessonSelected">
    <span><img src="https://www.google.co.in/logos/doodles/2014/world-cup-2014-1-6584893165273088-res.png"/></span>
</div>

如何将图像添加到JQuery对话框

2 个答案: