Dynamiczne generowanie elemenu z funkcjią onclick przyjmującą argument jako string

Question

Witam!

 

Mam pewien problem z dynamicznym dodawaniem elementów do strony poprzez funkcje append jQuery. Chcę dodać element który reaguje na kliknięcie i przekazuje w argumencie funkcji ciąg znaków który jest dla każdego elementu inny. Więc <a onclick="moja_funkcja('tutaj jest zmienny ciag znakow')">Napis</a>. Przekazując argument muszę go odzielić znakiem ' więc cała nazwa funkcji musi być osadzona w " - cudzysłowiu. Generując element dynamicznie zamiast napisu: tutaj jest zmienny ciąg znaków chcę mieć zmienną która będzie zawierała odpowiedni tekst, więc generuję to tak:

var count = 0;
function add_item ()
{
	//alert();
  var zmienna_z_paretrem_string = "to jest napis";
  var onclick_arg = 'onclick="show('' ' + zmienna_z_paretrem_string + ' '')"';
  $('#link-container').append("<a " + onclick_arg + ">Element " + count + "</a> <br/>");
	
  count++;
}

function show ( str )
{
	alert(str);
}

Coś takiego nie działa i chyba nie za bardzo wiem jak to poprawić więc prosiłbym o nakierowanie mnie.

Kod na JsFiddle: https://jsfiddle.net/adriansikora344/ejuz08zj/1/

Answer 1

Zapomnij o onclick. Zdarzenia w Javascriptcie przypisujemy korzystając z addEventListener.

Podobnie nie powinieneś dodawać elementów jako string, gdyż przeglądarka musi wtedy przebudować całe drzewo DOM co jest wysoce niewydajne. Korzystaj z document.createElement.

Comments

Jeszcze pytanie co chcesz osiągnąć.

---

Zapomnij o onclick. Zdarzenia w Javascriptcie przypisujemy korzystając z addEventListener.

Dlaczego ? Jeżeli takie coś chciałbym wygenerować za pomocą PHP to jak mam dodać event za pomocą JavaScript ? W PHP dodaję jako onclick.

 

Według tego: https://stackoverflow.com/questions/327047/what-is-the-most-efficient-way-to-create-html-elements-using-jquery document.createElement jest najszybsze ale tutaj też podaje element jako string... append ma inne mechanizmy ?

 

---

Panie jak mieszasz php u jsa to współczuję.

Generalnie istnieje coś takiego jak separacja warstw dzięki czemu panowie od backendu robią php, programiści js piszą js a reszta frontu skrobie markup i style. Łączenie tego powoduje powstawanie niespójnego i nieskalowalnego kodu.

Co do szybkości...

https://jsperf.com/jquery-vs-createelement

Żeby korzystać z jQuery należy wystarczająco znać podstawowe mechanizmy JavaScriptu.

---

Nie chodzi o mieszanie PHP z JavaScriptem. W PHP mogę wygenerować kod HTML elementu i wkleić go tutaj...

To co chcę osiągnąć to: W stronie mam kilka tabel i po załadowaniu strony uruchamia się kod JS który zlicza wszystkie tabele pobiera ich id i tworzy odnośniki do każdej z nich tzn. po naciśnięciu danego przycisku strona przewija się do danej tabeli. I tyle chcę zrobić. Mam napisaną funkcję która przewija stronę do wybranego elementu ale do tego potrzebuje ona id elementu i owe id to ten zmienny napis...

---

https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link

To Ci powinno pomóc.

---

To czytałem już wcześniej, a wątek założyłem z problemem dynamicznego dodawania elementów i z prośbą o wyjaśnienie dlaczego ten sposób który przedstawiłem nie działa...

---

Baw się dobrze dalej z onclickami.

---

Przepraszam, ja nie jestem specjalistą i prosiłbym o wytłumaczenie czemu mam zrezygnować z onclick. Rozumiem że w ogólne nie powinienem dodawać ŻADNEJ funkcji JS poprzez onclick tylko zrobić to w onload ? To jest ze względu na ową warstwę o której wspomniałeś ? Czy to jest jedyny powód ?

---

Skoro prosisz o wytłumaczenie to nie pisz czegoś w stylu

wątek założyłem z problemem dynamicznego dodawania elementów i z prośbą o wyjaśnienie dlaczego ten sposób który przedstawiłem nie działa...

Wyraźnie tym sugerujesz, że rzeczy, które piszę Cię nie interesują i chcesz załatwić to po swojemu. Mniejsza 

Atrybutu onclick nie powinno się używać z kilku względów.

1. Pozwala Ci przypisać tylko funkcję do danej akcji.
2. Tworzysz coś co nie jest skalowalne w łatwy sposób; zmiana nazwy metody ma bardzo dużo konsekwencji, bo trzeba zmienić wszystkie odwołania do niej w markupie. 
3. Używanie atrybutu onclick sprzyja atakom xss. Nie wolno ufać niczemu co pochodzi od klienta. Js, który mu udostępniasz powinien być jak najbardziej odseparowany od markupu i hermetyzowany. Stosuj IIFE i unikaj funkcji globalnych. 

---

Warto nadmienić, że onclick może być przydatny, gdy metody addEventListener oraz attachEvent zawiodą na starszych przeglądarkach.