Получение значения из ввода после его сохранения во встроенную переменную click в jQuery

Question

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

$(document).on('click','.addItem', function(){

    $('<div class="col3">\
        <input type="hidden" class="itemId" name="itemId[]" value="">\
        <a class="rowDeleteButton" onclick="onclick="deleteItem($(this))">Delete Button</a>\
        <div class="saveButton rowSave">Save Button</div>\
    </div>')

});

Мне требуется после нажатия кнопки «Сохранить», чтобы значение, хранящееся в значении «=» скрытого ввода, также сохранялось в событии onclick для ссылки «Удалить кнопку».

Answer 1

У вас проблема в

onclick="onclick="deleteItem($(this))

Я думаю, достаточно просто передать this в функцию.Я также предпочитаю Шаблонные литералы .

Вы можете попробовать следующий способ:

$(document).on('click','.addItem', function(){

    $(this).append(`<div class="col3">
        <input type="hidden" class="itemId" name="itemId[]" value="hiddenTestValue">
        <a class="rowDeleteButton" onclick="deleteItem(event,this)">Delete Button</a>
        <div class="saveButton rowSave">Save Button</div>
    </div>`)
  
});

function deleteItem(e, el){
  var hdInput = $(el).parent().find('.itemId');
  console.log('value before:',hdInput[0].value);
  hdInput[0].value = '';
  console.log('value after:',hdInput[0].value);
  e.stopPropagation();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="addItem">Test</div>