ajax成功方法上动态创建的DOM元素答案

【问题标题】：Dynamically created DOM elements on ajax success methodajax成功方法上动态创建的DOM元素
【发布时间】：2019-02-08 08:50:16
【问题描述】：

我的 ajax 成功方法 DOM 元素创建有一点错误。在成功方法上，我创建了一个 html 表格行，并在该行内创建了一个表单，但该表单无法正常工作。

这是关于ajax成功的代码

success: function(data) {   
        
        html='';
        for (i = 0; i < data['qoutations'].length; i++) {
            html+='<tr><form method="post" action="index.php?route=catalog/product/getForm&user_token={{ user_token }}">';
            html+='<td class="text-center"><input type="checkbox" name="selected[]" value="'+data['qoutations'][i]['qoutation_id']+'" /></td>';
                
            html+='<td class="text-left">'+data['qoutations'][i]['customer_id'];
            html+='<input type="hidden" id="customer_id" value="'+data['qoutations'][i]['qoutation_id']+'"/></td>';
            html+='<td class="text-left">'+data['qoutations'][i]['description']+'</td>';                    
            html+='<td class="text-left"> <div class="form-group">';
            html+='<textarea class="form-control" rows="2" id="qouted"></textarea>';
            html+='</div></td>';

            html+='<td class="text-left">';
            var customer_id1=data['qoutations'][i]['customer_id'];
            var qoutation_id1=data['qoutations'][i]['qoutation_id'];                                
            html+='<input class="btn btn-info" type="submit" id="createproduct" value="Create Product" onClick="createProduct(\'' + customer_id1 + '\',\''+qoutation_id1+'\')"/></td>';
            
            html+='<td class="text-left">'+data['qoutations'][i]['qouted']+'</td>';
            html+='<td class="text-left">'+data['qoutations'][i]['status']+'</td>';
            
            html+='<td class="text-left">'+data['qoutations'][i]['date'];
            html+='<input type="hidden" id="date" value="'+data['qoutations'][i]['date']+'"/></td>';
            
            html+='<td class="text-left">';
            html+='<input class="btn btn-danger" type="button" id="cancel" value="cancel"/></td>';
            html+='</tr>';
        }
        $('#detail').html(html);
}

这张图片详细说明了我的错误。因为这张图片显示表单元素立即打开和关闭。 DOM screenshot

请帮忙，在此先感谢。

【问题讨论】：

标签： ajax dom

【解决方案1】：

您的代码的问题在于您实际上没有遵循在 ajax 回调中创建 html 的标准。表格行内不能有表格。唯一的方法是将表格行划分为子表格。请看一下这个问题。
HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?

【讨论】：