Question

我有一个数据表，我希望用户能够单击列标题并发送一个非AJAX请求，重新加载包含按该列排序的数据的页面。

我可以将列标题设为链接，但我希望它们能够点击列标题中的任意位置，所以我添加了隐藏的表单，我正在尝试使用jQuery单击列标题时提交表单。

我遇到的问题是，虽然与第二个标题完全一致 - 但点击会提交隐藏的表单并重新加载页面 - 但不起作用根本没有第一个标题 - 表单没有提交。

什么使第一栏的表格不被提交？
有没有比使用隐藏表单更好的方法？

HTML：

        <th class='sortable'> 
          <form action='/procurements' class='sort_form' method='get'> 
            <input name='sort' type='hidden' value='title' /> 
          </form> 
          Title
          <img class='sort_indicator' src='/images/sort_unsorted.jpg' /> 
        </th> 
        <th class='sortable'> 
          <form action='/procurements' class='sort_form' method='get'> 
            <input name='sort' type='hidden' value='nature' /> 
          </form> 
          Procurement type
          <img class='sort_indicator' src='/images/sort_unsorted.jpg' /> 
        </th>

JS：

$(document).ready(function(){
  $('table.tgr_datagrid th.sortable').click(
    function() {
      $(this).children( 'form' ).submit();
    }
  );
});

Answer 1

如果您只是在执行GET请求，请不要费心使用form：

$('table.tgr_datagrid th.sortable').click(function() {
    window.location = '/procurements?sort=' + $(this).text();
});

DEMO： http://jsfiddle.net/marcuswhybrow/NL3km/

因此，在代码的上下文中，您可以拥有此功能，（请注意自定义data-sort-name属性）：

<table>
    <tr>
        <th class='sortable' data-sort-name="title">
            Title
            <img class='sort_indicator' src='/images/sort_unsorted.jpg' /> 
        </th> 
        <th class='sortable' data-sort-name="nature"> 
            Procurement type
            <img class='sort_indicator' src='/images/sort_unsorted.jpg' /> 
        </th>
    </tr>
</table>

jQuery的：

$('th.sortable').click(function() {
    window.location = '/procurements?sort=' + $(this).attr('data-sort-name');
});

Answer 2

您可能需要在.each()周围使用.click()，否则您只会在返回的数组/对象的最后一个元素上发出点击（正如您所注意到的）。

$(document).ready(function(){
   $('table.tgr_datagrid th.sortable').each(function(){ 
      $(this).click(function() { $(this).children('form').submit(); });
   });
});

其他想法：

还有很多其他方法可以做到这一点，问题是你为什么要按照自己的方式去做，为什么要这样做呢？

为什么jQuery会触发一些表单提交但不会触发其他表单？

2 个答案:

其他想法：