如何访问使用ajax和javascript创建的输入元素数组并获得这些单独的值

Question

这是我的代码和我的问题：

HTML：

<tbody id="list"></tbody>

Javascript：

let suggest;
const name = $('#post input[name=name]');
const rating = $('#post input[name=rating]');
const postinputs = $('#form-submit');
const table = document.querySelector('#list');

$.ajax({

    method: 'GET',
    url: wpApiSettings.root+'top-list-route/my-top-list-get',
    contentType: 'application/json; charset=utf-8',
    beforeSend: function ( xhr ) {
        xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
    },
    dataType: 'json',
    success: ajaxResponse

});

function ajaxResponse(data) {

    let str = [];
    suggest = data;
    for ( let i = 0; i < suggest.length; i ++ ) {
        const name = suggest[i].name;
        const rating = suggest[i].rating;
        str += '<tr>';
        str += `<td><input type="text" value=${suggest[i].name}></td>`;
        str += `<td><input type="text" value=${suggest[i].rating}></td>`;
        str += `<td><button type="button">Update</button></td>`;
        str += `<td><button class="delete">Delete</button><input name="delete[]" type="hidden" value=${suggest[i].id}></td>`;
        str += '</tr>';
    }
    table.innerHTML = str;

}

基本上，我需要访问此字符串的代码：

str += `<td><button class="delete">Delete</button><input name="delete[]" type="hidden" value=${suggest[i].id}></td>`;

尤其是，我需要访问由javascript动态添加的值。

我尝试过：

$(table).add('.delete').click( function() {
        var log = $('input[name="delete[]"]').val();
        console.log(log);
}

但是结果始终为2，这是从该特定元素的输入数组获得的数组的第一个值。

我该如何解决我的问题？

我也尝试将元素与事件绑定（在）：

$(document).on(click, 'input[name="delete[]"]', function() {
   console.log(this.val());
}

但是它不返回任何东西。

Answer 1

您的第二个解决方案，$(document).on(input)，原则上是正确的，除了您的输入是隐藏的，因此您无法单击它。第一个几乎是正确的。它应该看起来像：

$(table).find('.delete').click( function() {
    var log = $(this).siblings('input[name="delete[]"]').val();
    console.log(log);
});

[想法是，我们将click处理程序绑定到按钮（".delete"）上，并在处理程序中找到输入（我们知道这是按钮的同级）。

不过，您的情况可能还有另一个问题：如果您在之后动态加载表格元素，它们将不会受到点击处理程序的限制。因此，您可以妥协：

$(document).on('click', '.delete', function() {
    var log = $(this).siblings('input[name="delete[]"]').val();
    console.log(log);
});