получение входных значений с помощью jQuery

0

Я пытаюсь получить значения из полей ввода после нажатия кнопки "Удалить" и перед удалением строки с помощью jQuery. Прямо сейчас я просто пытаюсь получить первую коробку, но мне не повезло с моими попытками выбора.

Вот последняя попытка получить входное значение, имеющее класс.editing. Кстати, это не весь код. Функция removeIng срабатывает, как предполагалось, я просто не возвращаю то, что мне нужно.

$('.remove_ing').click(removeIng);

function removeIng(){ //removes the row
    alert($(this).parentsUntil('tr').find('.editing').val());
    $(this).parent().parent().remove();
}

Вот HTML, у меня есть несколько строк, подобных этому (добавляется динамически)

<tr>
  <td><input type='text' name='ingredient' value='' class='editing' /></td>
  <td><input type="text" class='editing_amt' name="amount" size="8" value="100"/></td>
  <td><select name='meas' class='editing_meas'></select></td>
  <td><input type="button" name="remove_ing" class="remove_ing" value="Remove"/></td>

</tr>

Спасибо за помощь

  • 0
    Я не знаю, неправильно ли я понимаю, но единственные элементы, которые имеют класс «редактирования», на самом деле не имеют значения!
  • 0
    Вместо .parent().parent() вы, вероятно, должны сделать что-то более явное, например, closest . Таким образом, если вы добавите обертку к своему input позже, вы не прервете свой вызов.
Теги:
jquery-selectors

2 ответа

2
Лучший ответ

Использовать .on()

Поскольку элементы добавляются динамически, вы не можете напрямую связывать события с ними. Поэтому вам нужно использовать Event Delegation.

$(document).on('click','.remove_ing',removeIng);

function removeIng(){ //removes the row
    alert($(this).parentsUntil('tr').find('.editing').val());
    $(this).parent().parent().remove();
}

Синтаксис

$( elements ).on( events, selector, data, handler );

Используйте .closest()

Вместо

$(this).parent().parent().remove();

использование

$(this).closest('tr').remove();
Поделиться
  • 0
    Как насчет $ (this) .parents ("tr"). First ()?
  • 0
    @SamCcp $(this).parents("tr") также будет работать. но $(this).closest('tr') быстрее.
Показать ещё 6 комментариев
0

Если ваш html статический (он не динамический), вы должны дать кнопке id и, предпочтительно, tr. Если это не так, то делегация событий - это путь. @Tushar дал вам представление о делегировании событий.

Во всяком случае, здесь небольшой фрагмент, который может вам помочь.

var btn = $(".remove_ing");
btn.click( removeIng );
function removeIng(){
    // get the row
    var tr = $(this).parents("tr").first();
    //get the text boxes
    var txt = tr.find("input[type='text']");
    //loop through the texts
    txt.each(function(){
        alert( $(this).val() );
    });
}

В обоих случаях (динамический или статический html) эта функция получит весь текст ввода. Надеюсь, поможет.

Поделиться
  • 0
    Я обязательно это проверю! Благодарю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню