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

});

在按下“保存”按钮后，我要求将存储在隐藏输入的value =“”中的值也存储在“删除按钮”链接的onclick事件中。

Answer 1

您在

中遇到问题

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

我认为只需将 this 传递给函数就足够了。我也更喜欢Template literals。

您可以尝试以下方式：

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

将输入保存到jQuery中的click变量中后，从输入中获取值

1 个答案: