如果在ajax加载中的表元素内部，则jQuery不会带来表单元素的内容 [英] jQuery does not bring the contents of a form element if inside a table element on an ajax load

问题描述

我对ajax有点陌生，并在一些我不知道的事情上苦苦挣扎...包括当表单元素包含其中不加载表格元素的内容时.有什么想法吗?

I'm a bit new to ajax and am strugging with a few things I can't figure out...including this one that does not load a table element when there is a form element in it. Any ideas?

对于称为TESTajax.php的主页，我有以下内容:

for the main page, called TESTajax.php I have these:

$("a").live('click',(function(e){ 
    var linkurl = $(this).attr('href');
    $("#main").load(linkurl);
    e.preventDefault();
}));

<a href="TESTajax.html">Test</a><div id="main">/div>

对于要加载的页面，TESTajax.html，我有:

And for the page that is to be loaded, TESTajax.html, I have:

<div>
    <div id="content">
        <h1>Can you see me now?</h1>
        <table>
            <thead></thead>
            <tfoot></tfoot>
            <tbody>
                <tr>
                    <form>
                        <input type="hidden" name="id" value="1"/>
                        <td>Value1</td>
                        <td><button>Submit</button></td>
                    </form>
                </tr>
                <tr>
                    <form>
                        <input type="hidden" name="id" value="2"/>
                        <td>Value2</td>
                        <td><button>Submit</button></td>
                    </form>
                </tr>
            </tbody>
        </table>
    </div>
</div>

页面加载时，H1会移过来，但没有其他内容.

When the page loads, the H1 comes over but nothing else.

如果我删除表并将所有内容制作为列表(UL和LI而不是TABLE和TR)，它将显示所有内容.

If I remove the table and make everything a list (UL and LI instead of TABLE and TR) it displays everything.

如果我删除表单标签，它将显示所有内容.

If I remove the form tags, it displays everything.

我很困惑，真的很喜欢那些表单标签，因为我现有的代码都是设计用来处理它的，而且我真的很想使用一个表，因为大约有15个数据列最好显示为一张桌子.

I'm quite confused and really do like have those form tags there as my existing code is all designed to work with it and I'd really like to use a table because there are about 15 data columns that are best presented as a table.

有想法吗?

谢谢！

推荐答案

您不能在<tr>中直接包含<form>，因此可能会抛出无效的HTML.

You can't have a <form> directly inside a <tr>, so the invalid HTML is probably being tossed.

给出您的<form>和输入元素，看起来该行的布局可以工作:

Given your <form> and input elements, it looks like this layout for a row would work:

<tr>
   <td>Value1</td>
   <td>
     <form>
       <input type="hidden" name="id" value="1"/>
       <button>Submit</button>
    </form>
  </td>
</tr>

或者，如果您通过AJAX提交，则可以自己对行进行序列化，但是这种方法不会降低性能，因此建议您尽量避免这样做. IMO <form>标记应该能够封装一行，这非常方便，不幸的是事实并非如此.

Alternatively if you're submitting via AJAX, you could serialize the row yourself, but this approach won't degrade well, so I'd advise against it when possible. IMO <form> tags should be able to encapsulate a row, it'd be tremendously handy, unfortunately that's not the case.

这篇关于如果在ajax加载中的表元素内部，则jQuery不会带来表单元素的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！