Почему jQuery запускает некоторые формы, а другие нет?

Question

У меня есть таблица данных, и я хочу, чтобы пользователь мог щелкнуть заголовок столбца и отправить не-AJAX-запрос, который перезагружает страницу с данными, отсортированными по этому столбцу.

Я мог бы просто сделать заголовок столбца ссылкой, но Я хочу, чтобы они могли щелкнуть в любом месте заголовка столбца , поэтому я добавил скрытые формы и пытаюсь использовать jQuery для отправки форма при нажатии на заголовок столбца.

Проблема, с которой я сталкиваюсь, заключается в том, что хотя работает точно так, как и ожидалось для заголовка второго столбца - щелчок передает скрытую форму и перезагружает страницу - но не работает все для первого заголовка столбца - форма не отправляется.

1. Что удерживает форму первого столбца от отправки?

2. Есть ли лучший способ сделать это, чем использовать скрытую форму?

---

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(); });
   });
});

---

Другие мысли:

• Есть много других способов сделать это, вопрос в том, почему вы делаете это таким, какой вы есть, и почему вы хотите сделать это таким образом?