为什么jQuery会触发一些表单提交而不是其他表单提交?

bzzcjhmw  于 2022-12-18  发布在  jQuery
关注(0)|答案(2)|浏览(215)

我有一个数据表,我希望用户能够单击列标题并发送一个非AJAX请求,以重新加载包含按该列排序的数据的页面。
我可以只将列标题设置为链接,但是我希望他们能够单击列标题中的任何位置因此我添加了隐藏表单,并尝试使用jQuery在单击列标题时提交表单。
我遇到的问题是,尽管它对第二个列标题完全按预期工作--单击提交隐藏的表单并重新加载页面--但对第一个列标题根本不起作用--表单没有被提交。
1.是什么阻止了第一列表单的提交?
1.有没有比使用隐藏表单更好的方法来实现这一点?
超文本:

<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>

联森:

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

vjrehmav1#

如果你只是在做一个GET请求,那么就不要使用form了:

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

演示: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');
});

ua4mk5z4

ua4mk5z42#

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

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

其他想法:

  • 有很多其他的方法你可以做到这一点,问题是你为什么要这样做,为什么你想这样做?

相关问题