Hookowanie dynamicznych elementów strony
Robiin
13.05.2020
Potrzebuję w JS wyłapać event "on click" i wywołać "click" na przycisku, który generowany jest dynamicznie a jego ID się zawsze różni (rozpoznawany jest przez xpath). Może być przez JQuery.
Ręczne wyłapywanie elementu i dodawanie .click() nie działa.
Rivit
13.05.2020
Nie wiem jak teraz sie to robi, ale z dwa lata temu miałem podobny problem.
Jeśli te buttony mają wspólnego parenta (jakiegoś diva czy coś) możesz monitorować zmiany jego dzieci, coś w stylu: https://developer.mo...utationObserver
Nie wiem co to xpath i to co wrzuciłem może byc kompletnie useless
dasiek
13.05.2020
Co tego buttona? czy ID tego wygenerowanego buttona ma zawsze "taką samą część selektora"? Np id `jakies-gowno-gotowe-RANDOMHASH` albo klasę bardzo podobną ?
Robiin
13.05.2020
Nie wiem co to xpath i to co wrzuciłem może byc kompletnie useless
Observer nie wyłapał żadnych zmian, może przez zły conifg, nie jestem pewny. W każdym razie hookowanie "on click" jest częścią mniej priorytetową, bardziej mi zależy na wymuszeniu kliknięcia.
czy ID tego wygenerowanego buttona ma zawsze "taką samą część selektora"?
Zawsze ma ID złożone w stylu "button-RANDOM_SET_OF_NUMBERS", ale nie mam problemu z rozpoznaniem elementu (bo do tego dojdę po full xPath, które zawsze jest takie samo), tylko z wymuszeniem jego stanu na ".click".
dasiek
13.05.2020
Skoro już masz, korzystaj z jQuery - chyba że jest jakiś powód, że xpath być musi.
Znajdowanie elementu po początku atrybutu -> https://api.jquery.c...-with-selector/
klikanie - wykorzystane trigger zamiast click -> https://api.jquery.com/trigger/
Przykład:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>myslal donciak ze go nie zgarne, a tu o, jeszcze htmle i dżawaskrypty dla nieg klepie</title> </head> <body> <p>Poczekaj chwilę (5s), jak się button doda</p> <p>Button ma id zaczynające się od `button-`</p> <div class="parent"> <button id="iWantToClick">Kliknij button dynamiczny</button> </div> <script src="https://code.jquery.com/jquery-git.js"></script> <script> // tutaj tworzymy nowy buttonik, symulujemy to magiczne "utworzenie sie zewnatrz" setTimeout(() => { let newDynamicButton = document.createElement('button'); newDynamicButton.innerText = "JESTEM DYNAMICZNY ZJEM CIE AAAAA!" newDynamicButton.id = `button-${+new Date()}`; newDynamicButton.addEventListener('click',() => { alert(`dupa`); // bo coś testowego bez slowa DUPA nie ma prawa istnieć },false); $('.parent').append(newDynamicButton); }, 5000); $('#iWantToClick').on('click', (e) => { if(!$(`[id^='button']`).length) { alert('Mówiłem co darka kochanego poczekaj!'); return; } /** * Jesli maja wspolengo parenta (jak tu), mozesz dodac * $(e.target).closest(`selektor`).find(`[id^='button']`); * * ex. * $(e.target).closest(`.parent`).find(`[id^='button']`); * * * i wykonujemy .trigger(`click`) zamiast `.click()`. * * Chrome 81 (chyba) - działa */ $(`[id^='button']`).trigger('click'); }); </script> </body> </html>
Robiin
13.05.2020
Okej, okazuje się, że strona nie używa jQuery, a przynajmniej poniższy kod walnął alertem "None":
if (typeof jQuery != 'undefined') { alert(jQuery.fn.jquery); } else { alert("None"); }
Nie wiem jak, ale tym razem załapało zwyczajne:
document.getElementById('buttonid').click();
Kliknięcie następuje, bo hookując "onclick" na ten przycisk z alertem, pojawia się alert przy wykonaniu powyższego kodu, ale sama akcja, która powinna się wykonać po kliknięciu przycisku nigdy nie następuje.
TL;DR
Przycisk jest klikany przez ".click()", ale akcja związana z jego kliknięciem się nigdy nie wykonuje.
DarkGL
13.05.2020
click nie działa tak jak prawdziwe klikniecie przez użytkownika https://www.freecode...-click/170745/2
dasiek
14.05.2020
Może powrócę do mojego pytania numero UNO: co generuje ten button? To jakaś biblioteka gotowa (slider czy cuś)? Mógłbyś to podesłać?
Robiin
14.05.2020
click nie działa tak jak prawdziwe klikniecie przez użytkownika https://www.freecode...-click/170745/2
Czyli trzeba ręcznie wywoływać funkcję, która by się wykonała przy kliknięciu przycisku, bo .click() nie zadziała dokładnie tak samo jak prawdziwe kliknięcie. O ile dobrze zrozumiałem.
Może powrócę do mojego pytania numero UNO: co generuje ten button? To jakaś biblioteka gotowa (slider czy cuś)? Mógłbyś to podesłać?
Teraz się zmieniło podejście, bo okazuje się, że przycisk wcale nie musi być generowany dynamicznie.
Wyszedłem z założenia, że jeśli mi go nie znajdywało wcześniej, to musiał być dorabiany gdzieś w locie, ale wychodzi na to, że przycisk jest cały czas, tylko .click() mi nie działało.
Potem spróbuje pokombinować sposobem podrzuconym przez darka i dam znać.