Как узнать о появлении элемента на страницы
Здравствуйте!
Подскажите пожалуйста, как узнать о том, что на страницы появился, например, div c определенным id? Вот так не работает:
$( "$d" ).on({click: function() {
alert('Я здесь))');
}
});
|
У этого дива наверное есть событие, вот на него и надо обратить внимание.
Рони, недавно постил вот такой способ https://developer.mozilla.org/ru/doc...tationObserver |
Этот код при любом изменении на страницы должен срабатывать, или нет?
var observer = new MutationObserver(function (mutations) {
alert('Я здесь))');
});
|
Цитата:
Цитата:
|
DDim1000,
По идее, надо подписывать на body - тогда все изменения проявятся |
Цитата:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var observer = new MutationObserver(function(mutations) {
if(document.querySelector("#id")){
alert('Я здесь))');
observer.disconnect();
}
});
observer.observe(document.body, {childList: true});
// добавить в body нужный элемент через 3 сек.
setTimeout(()=>document.body.insertAdjacentHTML('beforeend', '<div id="id">Hello</div>'), 3000);
</script>
</body>
</html>
|
Спасибо!
|
Цитата:
Вот смотрите, если jquery.validate создает вот такой код: <label id="reg_phone-error" class="error" for="reg_phone" style="display: inline;">Укажите номер телефона!</label> Или вот такой код: <label id="reg_phone-error" class="error" for="reg_phone" style="display: inline;">Неверный формат номера телефона!</label> То, все отлично работает! Но, когда генерируется такой же код, только с другим текстом, ни какой реакции нет! <label id="reg_phone-error" class="error" for="reg_phone" style="display: inline;">Пользователь с таким номером уже <br> зарегистрирован!</label> |
не нужно создавать два элемента с одинаковым ID отсюда проблемы.
observer.disconnect(); // снимает наблюдение если вам нужно наблюдать дальше, уберите эту строчку |
Так работает
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var observer = new MutationObserver(function(mutations) {
if(document.querySelector("#reg_phone-error")){
alert('Я здесь))');
observer.disconnect();
}
});
observer.observe(document.body, {childList: true});
// добавить в body нужный элемент через 3 сек.
setTimeout(()=>document.body.insertAdjacentHTML('beforeend', '<label id="reg_phone-error" class="error" for="reg_phone" style="display: inline;">Неверный формат номера телефона!</label>'), 3000);
</script>
</body>
</html>
И так работает
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var observer = new MutationObserver(function(mutations) {
if(document.querySelector("#reg_phone-error")){
alert('Я здесь))');
observer.disconnect();
}
});
observer.observe(document.body, {childList: true});
// добавить в body нужный элемент через 3 сек.
setTimeout(()=>document.body.insertAdjacentHTML('beforeend', '<label id="reg_phone-error" class="error" for="reg_phone" style="display: inline;">Пользователь с таким номером уже <br> зарегистрирован!</label>'), 3000);
</script>
</body>
</html>
Или вы создаете ЕЩЕ один лейбл? Тогда j0hnik прав |
если вам нужно выполнять разный код для вновь созданных элементов: предлагаю такой код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var i = 1, j = 1;
var observer = new MutationObserver(function(mutations) {
if(document.querySelector("#id")&& i) {
alert('Я здесь))');
i--;
}
if(document.querySelector("#id2")&& j) {
alert('Я Второй))');
j--;
}
});
observer.observe(document.body, {childList: true});
// добавить в body нужный элемент через 3 сек и через 6 сек.
setTimeout(()=>document.body.insertAdjacentHTML('beforeend', '<label id="id">Hello</label>'), 3000);
setTimeout(()=>document.body.insertAdjacentHTML('beforeend', '<label id="id2">Other TEXT</label>'), 6000);
</script>
</body>
</html>
|
Цитата:
Как тогда в такой ситуации поступить, если одно и тоже поле нужно проверить на пустоту, проверяется формат телефона, и посмотреть в базе, не зарегистрирован ли уже кто-то с этим номером?:
function clearPhone(val){
var newVal = val.replace(/[^\d]+/g, '');
if (newVal == '') {
return false;
}else{
return newVal;
}
};
$.validator.addMethod('reg_phone', function (value) {
var phone = clearPhone(value); console.log(phone);
var formatPhone = /79/g;
var rezzult = phone.match(formatPhone);
if (rezzult == null) {
return false;
}
.....
$('#form_reg').validate({
//Правила для проверки
rules: {
.....
"reg_phone":{
required:true,
reg_phone: { reg_phone: true },
remote: {url: "check_phone.php", type:"post" }
},
},
//Текста предупреждений
messages: {
.....
"reg_phone":{
required: "Укажите номер телефона!",
reg_phone:"Неверный формат номера телефона!",
remote: "Пользователь с таким номером уже <br /> зарегистрирован!"
},
},
Вообще у меня задача такая: Когда выводиться сообщение: "Пользователь с таким номером уже <br /> зарегистрирован!", нужно изменить margin-top, чтоб сообщение выше было. |
DDim1000,
может css?? |
Цитата:
|
Цитата:
А как узнать о том, что вывелось именно это сообщение? Просто нужно узнать длину строки, и если длинна строки больше 31 символа, то изменить margin-top. |
DDim1000,
1 нормальный способ изучить validate - изменить шаблон для remote 2. ничего не изучать, что уже ненормально, а просто изменить css (консоль в помощь, смотрите html этого remote сообщения, вычисляйте селектор). всё остальное лучше не рассматривать |
Цитата:
"reg_phone":{
required: "Укажите номер телефона!",
reg_phone:"Неверный формат номера телефона!",
remote: "Пользователь с таким номером уже <br /> зарегистрирован!"
|
DDim1000,
обернуть сообщение в span.remote не пробовали? |
Цитата:
remote: '<p id="number_is_busy">Пользователь с таким номером уже <br /> зарегистрирован!</p>'
#number_is_busy{
margin-top: -9px;
}
|
DDim1000,
:) :victory: |
| Часовой пояс GMT +3, время: 02:37. |