Блог

Главная - Вопросы по программированию - jQuery / Javascript моя функция не запускается при нажатии кнопки

jQuery / Javascript моя функция не запускается при нажатии кнопки

#javascript #jquery #function #class #rows

#javascript #jquery #функция #класс #строки

Вопрос:

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

 <tr class='rowdata'>
     <td>Bob</thd>
</tr>

<input type='submit' class='getRow' value='ClickMe'>

<script>
    $(".getRow").click(function() {
       var rowOfData = $(this).closest(".rowdata");
       alert(rowOfData.text());
    });

</script>

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

Комментарии:

1. Это не так .closest() работает. Возможно, вы захотите использовать .siblings('rowdata') вместо этого или .prev() / .prevAll('.rowdata') , в зависимости. (Также, не связано: ваш <td> закрыт некорректно.)

2. @Jeto за исключением того, что ввод не может быть прямым аналогом tr

3. @Taplar Хорошая мысль, это недопустимый HTML, и jQuery даже не найдет его в этом случае.

Ответ №1:

Ну, во-первых, проверили ли вы консоль вашего разработчика (F12), чтобы увидеть, есть ли у вас какие-либо ошибки. Вы уверены, что ссылались на библиотеку jQuery.

Далее, даже при наличии ссылки на jQuery, .closest() будет выполнен поиск элементов-предков элемента, для которого вы его вызываете. Если ваша кнопка не является потомком элемента, который вы хотите найти, вы его не найдете.

Теперь, предполагая, что .closest() ваша строка найдена, вы затем запрашиваете .text() во всей строке. Возможно, это то, что вы хотите, но более вероятно, что вам понадобятся данные по ячейкам.

Кроме того, ваша кнопка — это submit кнопка, которая используется для отправки данных формы, но не похоже, что это то, что вы здесь делаете. Если это так, используйте обычную кнопку.

И ваш HTML недопустим, поскольку у вас неверный закрывающий тег для вашей ячейки.

Итак, исправляя все это:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class='rowdata'>
     <td>Bob</td>
     <td>Smith</td>
     <td><input type='button' class='getRow' value='ClickMe'></td>
</tr>
</table>

<script>
    $(".getRow").click(function() {
       var rowOfData = $(this).closest(".rowdata");
       alert(rowOfData.text()); // Gets all the text in the row
       alert($("td:first-child", rowOfData).text()); // Gets just first cell
    });
</script>