Прежде всего, я поясню, что я прошел по ссылке ниже, но мне было трудно решить свою проблему. Link1, Link2, Link3
Проблема:
У меня на странице загружено следующее:
<div class = "btn-group">
<label class = "someClassDifferentForEachLoadedElement btn btn-primary "
onclick = "$('#someIdDifferentForEvryElement')
.find('label.active')
.toggleClass('active', false);
$(this).toggleClass('active', true);">
<input class = "validated" style = "display:none" toggle = "true" toggle-
checkbox = "false" type = "radio" value = "Y">
Yes
</label>
<label class = "someClassDifferentForEachLoadedElement btn btn-primary"
onclick = "$('#someIdDifferentForEvryElement')
.find('label.active')
.toggleClass('active', false);
$(this).toggleClass('active', true);">
<input class = "validated" style = "display:none" toggle = "true" toggle-
checkbox = "false" type = "radio" value = "N">
No
</label>
</div>
Весь приведенный выше код (самый сложный код удален) отображает интерактивное поле Да / Нет, как на изображении это
Приведенный ниже элемент динамически загружается в DOM при ответе ДА
<input class = "validated GTnumeric" size = "2" type = "text" value = "">
Подход:
Необходимо изменить тип загруженного элемента ввода с текстового на тел.
Ниже приведены все элементы, загруженные в DOM, которые отлично подходят для элементов, загруженных изначально:
$(document).ready(function() {
$(".GTnumeric").not("[type=hidden]").attr("type", "tel");
});
Но мне трудно заставить его работать для динамически загружаемых элементов. Мне нужно решить ту же проблему на многочисленных [страницах, и я не могу настроить таргетинг на какой-либо идентификатор, поскольку он меняется для каждого элемента.
Может ли кто-нибудь помочь мне решить эту проблему с помощью возможного подхода с использованием jQuery. Ценю вашу помощь.
ОБНОВЛЕНО:
После некоторого предложения от @barmar и @ f-CJ (спасибо вам обоим) я попробовал следующее:
Я пробовал ниже:
var observer = new MutationObserver(function (mutations)
{
mutations.forEach(function (mutation)
{
console.info(mutation.type);
// here I need get all elements with class "GTnumeric" and
// change its "type" to be "tel" if its not "hidden"
// **please help me out here**
// code mentioned below
});
});
var config = {
childList: true,
subtree: true
};
// Node, config
var targetNode = document.body;
observer.observe(targetNode, config);
Я не уверен, как снова сослаться на документ внутри цикла for, который выдает ошибку [Uncaught TypeError: t [i] .getAttribute не является функцией], когда я пытаюсь выполнить следующее:
пожалуйста, помогите мне здесь
var elems = document.getElementsByClassName(".GTnumeric");
for (var el in elems) {
if (elems[el].getAttribute("type") != 'hidden') {
elems[el].setAttribute("type", "tel");
}
}
@ f-CJ загружается под элементом Да / Нет. Я ответил на твой вопрос?
Вам необходимо запустить код, который изменяет тип после динамической загрузки элементов.
Ни один из опубликованных вами кодов не имеет к этому отношения. Опубликуйте код, который загружает новые элементы, и мы покажем вам, где это происходит.
Если вы можете изменить метод загрузки input
, это будет очень просто. Если вы не можете изменить метод загрузки input
, мы можем предложить различные варианты, чтобы получить то, что вы хотите. Можете ли вы изменить метод загрузки input
?
@Barmar К сожалению, я не могу изменить логику, которая загружает новый элемент :(
@ f-CJ Нет, я не могу изменить метод загрузки ввода. Мне нужно найти решение с элементами, которые я разместил здесь.
Вы можете использовать MutationObserver для автоматического обнаружения изменений в DOM.
@Barmar обязательно попробует и сообщит вам. Спасибо
@Barmar Я обновил то, что пробовал, с помощью MutationObserver, пожалуйста, посоветуйтесь дальше. Спасибо.
Итак, если вы не можете изменить метод загрузки файла input
, я вижу два возможных решения:
Добавьте обработчик событий click
и периодически проверяйте, пока не будет добавлен новый родственный элемент -> измените его.
$('div.btn-group > label').on('click', function(e) {
let $this = $(this);
let interv = setInterval(function() {
let gtNumeric = $this.siblings($(".GTnumeric").not("[type=hidden]"));
if (gtNumeric.length > 0) {
gtNumeric.attr("type", "tel");
clearInterval(interv);
}
}, 500);
});
Идея приведенного выше сценария состоит в том, чтобы проверить братьев и сестер label
, по которым был выполнен щелчок, и проверить, есть ли один из них с классом .GTnumeric
. Как только он будет найден, измените type
элемента и очистите интервал. Ставлю интервал полсекунды (500), можете адаптировать под свои нужды.
Не могли бы вы указать мне на любую ссылку jsbin или рабочий пример, который у вас есть, для первого предложения это поможет мне лучше понять
@cheresdb не уверен, понятно ли я объяснил, есть вопросы?
Спасибо за пример. Но есть одна проблема: моя стихия не является родным братом. Элемент вставляется под кнопкой, но не как родственный элемент, а как новый элемент строки.
@cheresdb Он добавляется как брат div.btn-group
?
Неа. Он добавляется как новый элемент div.row. Есть ли способ ссылаться на весь документ при возникновении события щелчка, чтобы проверить, добавлен ли элемент? Это должно решить проблему
@cheresdb Да, с Оберсервером мутации DOM: developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Я пробовал что-то с помощью Mutation Observer и в какой-то момент застрял. Я обновлю свой вопрос. Пожалуйста, помогите мне там. Большое спасибо за ваши ценные предложения до сих пор.
Поскольку я не уверен, как действовать дальше, я открыл новый вопрос об использовании MutationObserver в приведенной ниже ссылке.
Обсуждение перенесено здесь
Где в DOM загружен
input
?