| Autor | Zpráva | ||
|---|---|---|---|
| vlkodlak Profil |
Zdravím,
řeším následující kód a nerozumím proč se nepsuti se na web stránce mam tlačítko: <input id="addnewitem" type="button" value="Add new Absence" class="button btn btn-success" > v definici jQuery mam následující ... na konec stránky přidám tlačítko, které do konzole má vypsat pozdrav ... vložení proběhne, ale vypsáni pozdravu již ne $(document).ready(function () {
$("input#addnewitem").click(function () {
$('body').after('<a id="metlacitko" data-id="2021-01-13" href="#">Pozdrav</a>');
});
$("a#metlacitko").click(function () {
console.log("ahoj pane");
});
});prosím o radu jak zprovoznit funkci na událost $("a#metlacitko") |
||
| Serg Profil |
#2 · Zasláno: 9. 1. 2021, 01:44:06
Protože ten odkaz/tlačítko s id "metlacitko" se vytvoří až po kliknutí na input "addnewitem", ale to nastavení události se provede hned po načtení stránky, kdy jsi ještě nemohl stihnout kliknout na ten input button a tím vytvořit to "#metlačítko". Javascript teda vidí příkaz aby našel element s id "metlačítko" a tomu přiřadil funkci po kliknutí, ale jelikož žádný takový element nenajde, tak tu funkci ničemu nepřiřadí.
Klidně si zkus na konec té ready funkce vypsat: console.log($("a#metlacitko").length), řekl bych že to bude 0.
Vyřešit by to šlo např. nastavením té onclick funkce až po vytvoření toho tlačítka. $(document).ready(function () {
$("input#addnewitem").click(function () {
// vytvoreni tlacitka
$('body').after('<a id="metlacitko" data-id="2021-01-13" href="#">Pozdrav</a>');
// prirazeni eventu
$("a#metlacitko").click(function () {
console.log("ahoj pane");
});
});
});Mimochodem, na stránce by nemělo být víc prvků se stejným id, díky tomu nemá moc smysl do selektoru psát jméno tagu ("a#metlacitko") ale stačí jen to id ("#metlacitko"), a jestli by tam mělo být těch tlačítek víc, tak místo id je potřeba použít class. |
||
| Keeehi Profil |
#3 · Zasláno: 9. 1. 2021, 06:24:17
Ještě existuje další možnost. A tou je využít delegované události. V takovém případě se událost nastaví rodiči který v době nastavování existuje (v mém případě jsem zvolil body ale může to být klidně něco bližšího tomu budoucímu odkazu) a filtr, který pak při té události kontroluje, zda to vzniklo na daném elementu. Jelikož se to kontroluje až při vzniku té události, bude už v tu chvíli existovat to tvoje tlačítko.
$(document).ready(function () {
$("input#addnewitem").click(function () {
$('body').after('<a id="metlacitko" data-id="2021-01-13" href="#">Pozdrav</a>');
});
$("body").on("click", "a#metlacitko", function () {
console.log("ahoj pane");
});
});Poznámka Serg o id atributu samozřejmě platí i zde. Chtěl jsem však ukázku nechat co nejpodobnější. |
||
| vlkodlak Profil |
děkuji vám panové, v kombinaci s vašimi tipy jsem si také všiml, že tlačítka jsem přidávám mimo BODY což na funkčnosti moc nepřidávalo
|
||
| anonym_ Profil * |
#5 · Zasláno: 11. 1. 2021, 10:17:52
vlkodlak:
„jsem si také všiml, že tlačítka jsem přidávám mimo BODY“ To ničemu moc nevadí. První konec body bude v DOMu ignorován, nový konec body se utvoří na konci stránky. |
||
|
Časová prodleva: 2 roky
|
|||
0