Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → JavaScript, TypeScript, ECMAScript → зміна елементу, доданого через jQuery
Для відправлення відповіді ви повинні увійти або зареєструватися
є форма, де кнопкою додаються дублікати полів (випадаючий список, текстове поле і посилання), далі натискаючи посилання з написом "Delete", додається червона рамка навколо тієї групи полів, до якої посилання відноситься (це для тестування, потім заміню, щоб видаляло), але працює це лише для тієї групи, які початково є в html, а на додані через скрипт ні, а нада :с
Тому, що клік йде по тегу 'a', але тільки по першому.
При додаванні append генеруйте id'и для кожного нового елементу. Потім в циклі переберайте їх, вішаючи на кожен id елемент click функцію.
Є і інші варіанти, наприклад перебирати по назві класу getElementsByClassName(), чистий js.
Використовуй метод on, замість click.
Працюючий код:
$(function(){
$('#add_contact').click(function(){
$('.contact-data').append('<br><div class="contact-cell"><select name="" id="contacts" form="form"><option value="">Skype</option> <option value="">Facebook</option> <option value="">Linkedin</option> <option value="">Other</option> </select><input type="text" id="contact-name" form="form"><a href="#">Delete</a></div>');
}
);
$(document).on('click', 'a', function(){
$(this).parent().css("border", "2px solid red");
});
});Спрацює ж по кліку на будь-яке посилання на сторінці?
Обробник вішається на елемент у той момент, коли викликається $(...).click(...) — відповідно, ті елементи, які було додано пізніше, цього обробника не мають. Щоб обробники на них з'явились, достатньо повторити встановлення обробників після того, як було додано елемент:
$(function(){
$('#add_contact').click(function(){
$('.contact-data').append('<br><div class="contact-cell"><select name="" id="contacts" form="form"><option value="">Skype</option> <option value="">Facebook</option> <option value="">Linkedin</option> <option value="">Other</option> </select><input type="text" id="contact-name" form="form"><a href="#">Delete</a></div>');
$('a').click(function(){
$(this).parent().css("border", "2px solid red");
});
}
);
$('a').click(function(){
$(this).parent().css("border", "2px solid red");
});
});Спрацює ж по кліку на будь-яке посилання на сторінці?
ну тест жи, тому не принципово
коли прикручу до всього іншого, прослідкую, щоб було конкретне посилання
я роблю так як сказав пан Реплейс
$('parent_selector').on('click', 'a',function(){
//тут зловляться кліки по всіх кнопках , і старих і нових,
}).такий спосіб навіть кращий за
$('a').click(function(){})оскільки в памяті створюється тільки один обробник замість декількох на кожен "а" елемент.
Тому, що клік йде по тегу 'a', але тільки по першому.
При додаванні append генеруйте id'и для кожного нового елементу. Потім в циклі переберайте їх, вішаючи на кожен id елемент click функцію.Є і інші варіанти, наприклад перебирати по назві класу getElementsByClassName(), чистий js.
я так думала, але вирішила знайти менш громіздкий варіант, бо такий варіант ніби в обхід, тим паче для такого маленького завдання
я роблю так як сказав пан Реплейс
$('parent_selector').on('click', 'a',function(){ //тут зловляться кліки по всіх кнопках , і старих і нових, }).такий спосіб навіть кращий за
$('a').click(function(){})оскільки в памяті створюється тільки один обробник замість декількох на кожен "а" елемент.
А всередині методу on в jq, ) немає циклу який так само все перебирає і створює обробники?
Обробник вішається на елемент у той момент, коли викликається $(...).click(...) — відповідно, ті елементи, які було додано пізніше, цього обробника не мають. Щоб обробники на них з'явились, достатньо повторити встановлення обробників після того, як було додано елемент:
▼Прихований текст
хм, в мене викликало підозри, що щось там з тим обробником, але раз воно все в анонімній функції, то має працювати для всього
походу це ті тонкощі "зміни документу на ходу", про які я не знала
VTrim написав:Тому, що клік йде по тегу 'a', але тільки по першому.
При додаванні append генеруйте id'и для кожного нового елементу. Потім в циклі переберайте їх, вішаючи на кожен id елемент click функцію.Є і інші варіанти, наприклад перебирати по назві класу getElementsByClassName(), чистий js.
я так думала, але вирішила знайти менш громіздкий варіант, бо такий варіант ніби в обхід, тим паче для такого маленького завдання
Якщо вам потрібно лиш цей html обробити, то навпаки на чистому js і простим перебором.
Але це,якщо ваш проект ніде більше не вимагає jquery.
muhasjo написав:я роблю так як сказав пан Реплейс
$('parent_selector').on('click', 'a',function(){ //тут зловляться кліки по всіх кнопках , і старих і нових, }).такий спосіб навіть кращий за
$('a').click(function(){})оскільки в памяті створюється тільки один обробник замість декількох на кожен "а" елемент.
А всередині методу on в jq, ) немає циклу який так само все перебирає і створює обробники?
jQ десь там глибоко в ядрі десь так напевно і робить, хоча хто його зна.
Тут штука в тому що івенти ходять зсередини назовні, тобто коли відбувся клік скажімо по спану, то цей івент обовязково прийде до body (звичайно, якщо хтось в середині не обрубає його e.stopPropagation()).
а тут ситуація така що створюється тільки один хендлер на body.
Припустим є код :
$('body').on('click','a',function(){
console.log('a was clicked');
})
і уявім ситуацію що відбувся клік по span. Результат такий, в даному коді немає хендлерів обробки спана тому клік сміло дійде до body, але тут одне але , jQ зробить просту перевірку по селектору, і побачить, що span != a і відповідно не запустить нашу з ф-ію хендлер.
я знову тут 
тепер я намагаюсь змінити довжину інпута в залежності від вибору селекта
проблема в тому, що тепер додані інпути змінюють довжину залежно від того, як він змінився у початкового (що є в html), а не від вибраного поля у селекті
1) У тебе тут пусті value:
$('.contact-data').append('<div class="contact-block new"><select name="" class="contacts" form="form"><option value="">Skype</option> <option value="">Facebook</option> <option value="">Linkedin</option> <option value="">Other</option> </select><input type="text" class="contact-name" form="form"><a href="#">Delete</a></div>');2) Перевіряти краще так:
$(this).val()=="other"▼Прихований текст
1) У тебе тут пусті value:
$('.contact-data').append('<div class="contact-block new"><select name="" class="contacts" form="form"><option value="">Skype</option> <option value="">Facebook</option> <option value="">Linkedin</option> <option value="">Other</option> </select><input type="text" class="contact-name" form="form"><a href="#">Delete</a></div>');2) Перевіряти краще так:
$(this).val()=="other"
так чому пусті, якщо я схоплюю подію при зміні значення?
Для відправлення відповіді ви повинні увійти або зареєструватися