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

Question

Here's my code and my problem:

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;

}

Essentially I need to access the code of this string:

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

In particular, I need to access the value, which is dynamically added by javascript.

I tried:

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

But the result is always 2, which is the first value of the array obtained from the input array of that particular element.

How can I solve my problem?

I tried also to bind the element with an event (on):

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

But it doesn't return anything.

Answer 1

Your second solution, the $(document).on(input) one, is correct in principle except that your input is hidden, so you cannot click on it. The first one is almost right. It should look like:

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

The idea is that we bind the click handler on the button ( ".delete" ), and in the handler we find the input (which we know is a sibling of the button).

There's probably another problem in your case, though: if you load the table elements dynamically after, they won't have the click handler bound. So you could go with a compromise:

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