Как получить доступ к массиву входных элементов, созданных с помощью ajax и javascript, и получить эти отдельные значения - PullRequest
Новая
       6

Как получить доступ к массиву входных элементов, созданных с помощью ajax и javascript, и получить эти отдельные значения

0 голосов
/ 07 марта 2020

Вот мой код и моя проблема:

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());
}

Но оно ничего не возвращает.

1 Ответ

1 голос
/ 03 апреля 2020

Ваше второе решение, $(document).on(input), в принципе правильно, за исключением того, что ваш ввод скрыт, поэтому вы не можете нажать на него. Первый почти прав. Он должен выглядеть следующим образом: 

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

Идея состоит в том, что мы привязываем обработчик click к кнопке (".delete"), и в обработчике мы находим ввод (который, как мы знаем, является родственным элементом кнопка).

Возможно, в вашем случае есть еще одна проблема: если вы динамически загружаете элементы таблицы после, им не будет привязан обработчик кликов. Таким образом, вы могли бы go с компромиссом: 

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