Я относительно новичок в javascript и php, и я лечил эту проблему часами безуспешно.

Я создаю список на веб-странице, где элементы списка извлекаются из базы данных. PHP-код для создания списка выглядит так:

$options = get_option( 'psb_config' );
$n = 0;
echo '<ul id="session-type-list">';
foreach ( $options['type'] as $t ) {
    $html = '<li id="' . $t . '-field"><input id="' . $t . '-psb" type="text" class="type-btn" size="20%" value="' . $t . '" name="psb_config[type][' . $n . ']">';
    $html .= '<input type="button" class="button" value="remove" onclick="removeTypeButton(&#34' . $t . '-field&#34)"></li>';
    echo $html;
    $n++;
}
echo '</ul>';

Каждая запись в этом списке имеет поле ввода текста и кнопку удаления с вызовом функции onClick onclick="removeTypeButton(&#34' . $t . '-field&#34)">. Функция removeTypeButton() представляет собой простой JavaScript:

function removeTypeButton( id ) {
    document.getElementById( id ).remove();
}

И он отлично работает.

Я также хочу, чтобы пользователь мог добавлять поля в список, и у меня есть кнопка добавления сеанса в конце списка, которая вызывает следующую функцию javascript:

function addTypeButton( n ) {
    var node = document.getElementById("session-type-list");
    var id = '\"field-' + n + '\"';
    var html = '<li id=' + id + '>';
    html += '<input id="psb-' + n + '" type="text" class="type-btn" size="20%" placeholder="new shoot type" name="psb_config[type][' + n + ']">';
    html += '<input id="btn-' + n + '" type="button" class="button" value="remove" onClick="removeTypeButton(' + id  + ')"></li>';
    node.insertAdjacentHTML("beforeend", html);
}

Эта функция в целом работает так, как ожидалось, за одним исключением: после того, как она вставляет текстовое поле и кнопку удаления в конце списка <ul>, HTML-код кнопки удаления становится зашифрованным.

Моя HTML-строка:

<input id="btn-' + n + '" type="button" class="button" value="remove" onClick="removeTypeButton(' + id  + ')"></li>

И когда я проверяю элемент в браузере, строка выглядит так:

<input id="btn-10" type="button" class="button" value="remove" onclick="removeTypeButton(" field-10")"="">

Аргумент removeTypeButton(" field-10")"=""> облажался! Есть дополнительные кавычки и знак равенства.

Я пытался избежать кавычек и других махинаций, включая jQuery, но безуспешно. Похоже, что строка интерпретируется так, как будто функция onClick заканчивается после (, а аргумент интерпретируется как другой тег.

Итак, мой вопрос: что я делаю не так? Я искал это в течение нескольких часов, и stackoverflow - мое последнее средство.

Любые советы высоко ценятся.

1
bistromatic 11 Фев 2021 в 02:17

1 ответ

Лучший ответ

Если вы просматриваете исходный код страницы, а не проверяете элемент, вы обнаружите, что все заканчивается так

onClick="removeTypeButton("field-10")">

Двойные кавычки внутри двойных кавычек, скорее всего, сбивают с толку браузер. Преобразуйте внутренние кавычки в одиночные числа.

var id = '\'field-' + n + '\'';

Это должно иметь желаемый эффект:

onClick="removeTypeButton('field-10')">

0
rjdown 11 Фев 2021 в 00:08