jQuery Append无法正常工作

问题描述：

我正在使用jQuery动态生成某些表单，并在jQuery对话框中显示它们。但我的html元素没有正确创建。jQuery Append无法正常工作

我用下面的代码：

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 protected]" 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。

谢谢！

答

然后做一个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

完美的作品。感谢您的快速回复。 :) –

答

jQuery自动完成您与append（如何知道您将在后面附加结束标记）中输入的任何不完整标记，因此您需要将它全部设置为一行并执行一条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>');

或者这样：

newDiv.append('<form id="' + subject+'" name="'+subject+'" method="POST" action="#"></form>'); 
newDiv.find('#'+subject).append('<table class="sendmail" cellpadding="0" cellspacing="0" width="100%"></table>'); 
newDiv.find('.sendmail').append(

//continue this proccess for all elements

我使用了您提到的第一种方法。完美的作品。谢谢:) –

jQuery Append无法正常工作

相关推荐