Question

我使用jQuery动态生成一些表单并在jQuery对话框中显示它们。但是我的html元素没有正确创建。

我使用以下代码：

function generateEmail(to, cc, subject) {
        var newDiv = $(document.createElement('div'));

        newDiv.append('<form id="'+subject+'" name="'+subject+'" method="POST" action="#">');
        newDiv.append('<table class="sendmail" cellpadding="0" cellspacing="0" width="100%">');
        newDiv.append('<tr>');
        newDiv.append('<th width="25%"><label for="to">To: </label></th>');
        newDiv.append('<th width="75%"><input type="text" id="to'+subject+'" name="to" class="text small sendmail" value="'+to+'" /></th>');
        newDiv.append('</tr>');
        newDiv.append('<tr>');
        newDiv.append('<th width="25%"><label for="cc">CC: </label></th>');
        newDiv.append('<th width="75%"><input type="text" id="cc'+subject+'" name="cc" class="input" value="'+cc+'" /></th>');
        newDiv.append('</tr>');
        newDiv.append('<tr>');
        newDiv.append('<th width="25%"><label for="subject">Subject: </label></th>');
        newDiv.append('<th width="75%"><input type="text" id="sj'+subject+'" name="subject" class="input" value="'+subject+'" /></th>');
        newDiv.append('</tr>');
        newDiv.append('<tr>');
        newDiv.append('<th width="25%"><label for="message">Message: </label></th>');
        newDiv.append('<th width="75%"></th>');
        newDiv.append('</tr>');
        newDiv.append('<tr>');
        newDiv.append('<th colspan="2"><textarea name="message">email body</textarea></th>');
        newDiv.append('</tr>');     
        newDiv.append('</table>');
        newDiv.append('</form>');

        $(newDiv).dialog({
            modal: true,
            title: "Reply to "+subject,
            height: 400,
            width: 700,
            buttons: [
                {
                    text: "Cancel",
                    click: function() {
                        $(this).dialog("close");
                    }},
                {
                text: "Send",
                click: function() {
                    if($('#to'+subject).val() == ''){
                        alert('empty');
                    }
                    //$('#zFormer').submit();
                }}
            ]
        }); 
    }

但我得到的结果是：

<div class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 289px;" id="ui-id-1">
    <form id="SDS19272N63023" name="SDS19272N63023" method="POST" action="#"></form>
    <table class="sendmail" width="100%" cellpadding="0" cellspacing="0"></table>
    <tr></tr><th width="25%"><label for="to">To: </label></th><th width="75%"><input id="toSDS19272N63023" name="to" class="text small sendmail" value="email@gmail.com" type="text"></th>
    <tr></tr><th width="25%"><label for="cc">CC: </label></th><th width="75%"><input id="ccSDS19272N63023" name="cc" class="input" value="" type="text"></th>
    <tr></tr><th width="25%"><label for="subject">Subject: </label></th><th width="75%"><input id="sjSDS19272N63023" name="subject" class="input" value="SDS19272N63023" type="text"></th>
    <tr></tr><th width="25%"><label for="message">Message: </label></th><th width="75%"></th>
    <tr></tr><th colspan="2"><textarea name="message">email body</textarea></th>
</div>

如您所见，这些HTML元素未正确生成。我对此完全感到困惑。任何人都知道为什么？

我正在使用jQuery v1.10.2和jQuery UI - v1.10.4。

谢谢！

Answer 1

创建一个HTML字符串，然后将该HTML字符串传递给追加函数，如下所示

var newDiv = $(document.createElement('div'));
var HtmlStr = '<form id="'+subject+'" name="'+subject+'" method="POST" action="#">';
HtmlStr += '<table class="sendmail" cellpadding="0" cellspacing="0" width="100%">';
HtmlStr += '<tr>';
HtmlStr += '<th width="25%"><label for="to">To: </label></th>';
HtmlStr += '<th width="75%"><input type="text" id="to'+subject+'" name="to" class="text small sendmail" value="'+to+'" /></th>';
HtmlStr += '</tr>';
HtmlStr += '<tr>';
HtmlStr += '<th width="25%"><label for="cc">CC: </label></th>';
HtmlStr += '<th width="75%"><input type="text" id="cc'+subject+'" name="cc" class="input" value="'+cc+'" /></th>';
HtmlStr += '</tr>';
HtmlStr += '<tr>';
HtmlStr += '<th width="25%"><label for="subject">Subject: </label></th>';
HtmlStr += '<th width="75%"><input type="text" id="sj'+subject+'" name="subject" class="input" value="'+subject+'" /></th>';
HtmlStr +='</tr>';
HtmlStr += '<tr>';
HtmlStr += '<th width="25%"><label for="message">Message: </label></th>';
HtmlStr +='<th width="75%"></th>';
HtmlStr += '</tr>';
HtmlStr += '<tr>';
HtmlStr += '<th colspan="2"><textarea name="message">email body</textarea></th>';
HtmlStr +='</tr></table> </form>';
newDiv.append(HtmlStr);

示例JsFiddle

Answer 2

jQuery auto会自动完成您使用append放入的所有不完整标记（如何知道您稍后会附加结束标记），因此您需要将其全部一行并执行一个{{ 1}}陈述。要么或者附加在表单标签中，要获取该表单元素，然后将元素追加到该表单中（并为所有元素重复该过程）

所以这个：

append

或者这个：

newDiv.append('<form id="'+subject+'" name="'+subject+'" method="POST" action="#"><table class="sendmail" cellpadding="0" cellspacing="0" width="100%"><tr><th width="25%"><label for="to">To: </label></th><th width="75%"><input type="text" id="to'+subject+'" name="to" class="text small sendmail" value="'+to+'" /></th></tr><tr><th width="25%"><label for="cc">CC: </label></th><th width="75%"><input type="text" id="cc'+subject+'" name="cc" class="input" value="'+cc+'" /></th></tr><tr><th width="25%"><label for="subject">Subject: </label></th><th width="75%"><input type="text" id="sj'+subject+'" name="subject" class="input" value="'+subject+'" /></th></tr><tr><th width="25%"><label for="message">Message: </label></th><th width="75%"></th></tr><tr><th colspan="2"><textarea name="message">email body</textarea></th></tr></table></form>');

jQuery追加不能正常工作

2 个答案: