1

Тема: зміна елементу, доданого через jQuery

є форма, де кнопкою додаються дублікати полів (випадаючий список, текстове поле і посилання), далі натискаючи посилання з написом "Delete", додається червона рамка навколо тієї групи полів, до якої посилання відноситься (це для тестування, потім заміню, щоб видаляло), але працює це лише для тієї групи, які початково є в html, а на додані через скрипт ні, а нада :с

html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
    <form method="" id="form" action="">
    <table>
        <th><label>Contacts</label></th>
            <td class="contact-cell">
              <div class="contact-data">
          <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="hidden" name="contact" id="contact-name" style="width: 20%;" form="form">
                    <input type="text" id="contact-name" form="form"><a href="#">Delete</a></div></div>
                
</span><input type="button" id="add_contact" value="Add new" form="form">
                <br><br>
            </td>
        </tr>
    </table>

    </form>
     

</body>
</html>
сам скрипт
$(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");
    });
});

2

Re: зміна елементу, доданого через jQuery

Тому, що клік йде по тегу 'a', але тільки по першому.
При додаванні append генеруйте id'и для кожного нового елементу. Потім в циклі переберайте їх, вішаючи на кожен id елемент click функцію.

Є і інші варіанти, наприклад перебирати по назві класу getElementsByClassName(), чистий js.

Подякували: 221VOLT1

3

Re: зміна елементу, доданого через jQuery

Використовуй метод 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");
    });
});
Подякували: Cyan, mike, 221VOLT3

4 Востаннє редагувалося VTrim (05.02.2016 17:15:50)

Re: зміна елементу, доданого через jQuery

Спрацює ж по кліку на будь-яке посилання на сторінці?

5

Re: зміна елементу, доданого через jQuery

VTrim, так, але думаю це Cyan і сама розуміє. Мабуть навчальний/тестовий приклад.
Розумно додати якись клас, наприклад, .remove.

Подякували: VTrim, 221VOLT2

6 Востаннє редагувалося P.Y. (05.02.2016 17:21:14)

Re: зміна елементу, доданого через jQuery

Обробник вішається на елемент у той момент, коли викликається $(...).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");
    });
});
Подякували: Cyan, 221VOLT2

7

Re: зміна елементу, доданого через jQuery

VTrim написав:

Спрацює ж по кліку на будь-яке посилання на сторінці?

ну тест жи, тому не принципово
коли прикручу до всього іншого, прослідкую, щоб було конкретне посилання

Подякували: VTrim1

8

Re: зміна елементу, доданого через jQuery

P.Y., якщо так вже робити, то мабуть варто додати ще unbind. Інакше буде викликатись багато функцій, якщо багато разів вставляти щось.

Подякували: P.Y., 221VOLT2

9

Re: зміна елементу, доданого через jQuery

я роблю так як сказав пан Реплейс

$('parent_selector').on('click', 'a',function(){
//тут зловляться кліки по всіх кнопках , і старих і нових, 
}).

такий спосіб навіть кращий за

$('a').click(function(){})

оскільки в памяті створюється тільки один обробник замість декількох на кожен "а" елемент.

Подякували: Replace, Cyan, leofun01, 221VOLT4

10

Re: зміна елементу, доданого через jQuery

VTrim написав:

Тому, що клік йде по тегу 'a', але тільки по першому.
При додаванні append генеруйте id'и для кожного нового елементу. Потім в циклі переберайте їх, вішаючи на кожен id елемент click функцію.

Є і інші варіанти, наприклад перебирати по назві класу getElementsByClassName(), чистий js.

я так думала, але вирішила знайти менш громіздкий варіант, бо такий варіант ніби в обхід, тим паче для такого маленького завдання

11

Re: зміна елементу, доданого через jQuery

muhasjo написав:

я роблю так як сказав пан Реплейс

$('parent_selector').on('click', 'a',function(){
//тут зловляться кліки по всіх кнопках , і старих і нових, 
}).

такий спосіб навіть кращий за

$('a').click(function(){})

оскільки в памяті створюється тільки один обробник замість декількох на кожен "а" елемент.

А всередині методу on в jq, ) немає циклу який так само все перебирає і створює обробники?

Подякували: 221VOLT1

12

Re: зміна елементу, доданого через jQuery

P.Y. написав:

Обробник вішається на елемент у той момент, коли викликається $(...).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");
    });
});

хм, в мене викликало підозри, що щось там з тим обробником, але раз воно все в анонімній функції, то має працювати для всього
походу це ті тонкощі "зміни документу на ходу", про які я не знала

13

Re: зміна елементу, доданого через jQuery

Cyan написав:
VTrim написав:

Тому, що клік йде по тегу 'a', але тільки по першому.
При додаванні append генеруйте id'и для кожного нового елементу. Потім в циклі переберайте їх, вішаючи на кожен id елемент click функцію.

Є і інші варіанти, наприклад перебирати по назві класу getElementsByClassName(), чистий js.

я так думала, але вирішила знайти менш громіздкий варіант, бо такий варіант ніби в обхід, тим паче для такого маленького завдання

Якщо вам потрібно лиш цей html обробити, то навпаки на чистому js і простим перебором.
Але це,якщо ваш проект ніде більше не вимагає jquery.

Подякували: Cyan, 221VOLT2

14

Re: зміна елементу, доданого через jQuery

VTrim написав:
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 і відповідно не запустить нашу з ф-ію хендлер.

Подякували: leofun01, 221VOLT2

15

Re: зміна елементу, доданого через jQuery

я знову тут :)  :(
тепер я намагаюсь змінити довжину інпута в залежності від вибору селекта
проблема в тому, що тепер додані інпути змінюють довжину залежно від того, як він змінився у початкового (що є в html), а не від вибраного поля у селекті

html (із першого повідомлення не так працює)
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form</title>
    <link rel="stylesheet" href="form.css">
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
    <form method="post" id="form" action="">

    <table>
        
        <th><label>Contacts</label></th>
            <td class="contact-cell">
              <div class="contact-data">
          <div class="contact-block">
                    <select name="" class="contacts" form="form">
                        <option value="skype">Skype</option>
                        <option value="facebook">Facebook</option>
                        <option value="linkedin">Linkedin</option>
                        <option value="other">Other</option>
                    </select>
                    <input type="text" class="contact-name" form="form"><a href="#">Delete</a></div></div>
<input type="button" id="add_contact" value="Add new" form="form">
                <br><br>
            </td>
        </tr>
 
    </table>
    </form>     

</body>
</html>
код
$(function(){
        $('#add_contact').click(function(){
                $('.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>');
            }
        );
 
    $(document).on('click', 'a', function(){
        $(this).parent().remove();
    });

//-------------------маніпуляції з довжиною------------------------------

  $(document).on('change', '.contacts', function(){    
     if ($('.contacts option:selected').val()=="other") {
     $(this).siblings(".contact-name").width("180px");
    }
    else {
      $(this).siblings(".contact-name").width('100px');
    };
  });
  
});

16

Re: зміна елементу, доданого через jQuery

Прихований текст
Cyan написав:

це легко рівно настільки, що ви і самі можете справитись :)

Прихований текст

:D

Подякували: quez1

17

Re: зміна елементу, доданого через jQuery

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"

Працюючий код
    $(function(){
        $('#add_contact').click(function(){
                $('.contact-data').append('<div class="contact-block new"><select name="" class="contacts" form="form"><option value="skype">Skype</option> <option value="facebook">Facebook</option> <option value="linkedin">Linkedin</option> <option value="other">Other</option> </select><input type="text" class="contact-name" form="form"><a href="#">Delete</a></div>');
            }
        );
 
    $(document).on('click', 'a', function(){
        $(this).parent().remove();
    });
 
//-------------------маніпуляції з довжиною------------------------------
 
 $(document).on('change', '.contacts', function(){    
     if ($(this).val()=="other") {
     $(this).siblings(".contact-name").width("180px");
    }
    else {
      $(this).siblings(".contact-name").width('100px');
    };
  });
  });
Подякували: Cyan1

18

Re: зміна елементу, доданого через jQuery

VTrim написав:
Прихований текст
Cyan написав:

це легко рівно настільки, що ви і самі можете справитись :)

Прихований текст

:D

Прихований текст

цікаво, у вас так погано з логікою, щоб зрозуміти наскільки ситуації різні, тому що ви пхп-шник чи від природи такий...

19 Востаннє редагувалося VTrim (11.02.2016 19:38:52)

Re: зміна елементу, доданого через jQuery

Прихований текст

Це тому, що у вас припікло від простого жарту :)
В житті також на всіх так кидаєтесь?:(

20

Re: зміна елементу, доданого через jQuery

Replace написав:

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"

так чому пусті, якщо я схоплюю подію при зміні значення?