Autor Zpráva
Gavier
Profil
Dobrý den mám problém, vložil jsem na stránku div pomocí innerHTML. Vše proběhlo ok, ale nefungují mi u něj žádné JS události. Chtěl bych ho po kliknutí z html odstranit. Četl jsem si časté potíže a pochopil jsem že innerHTML vytvoří prakticky nový dokument. Předpokládám že je problém v tom, ale nevím jak to řešit.
$(".more").click(function(){
var edata= document.getElementById("content").innerHTML;
document.getElementById("content").innerHTML=(edata + '<div id="overlay"><a onclick="alert("ASDFDS");">odkaz</a></div>');
});
$("#overlay").click(function(){
alert("ASDFDS");
});

Po kliknutí na "overlay" ani "odkaz" se nic neděje. (alerty tam mám jen pro otestování) Jde mi o tom zobrazit další okno(div), kde jeho okolí bude "overlay" a po kliknutí na něj odstaním "overlay" a veškerý kod v něm vnořený. Pokud to lze řešit jednodušeji např pomocí jQuery , tak uvítám radu. Děkuji.
#overlay {
    background: none repeat scroll 0% 0% black;
    left: 0px;
    position: absolute;
    top: 0px;
    z-index: 9500;
    opacity: 0.8;
    height:100%;
    width:100%;
    color:red;
    display: block;
}

Stránka kde to aplikuji (po kliknutí na "+ VÍCE INFORMACÍ")
pcmanik
Profil
Gavier:
Pouzi metodu html, alebo append ktore ma jQuery. A nezabudaj ze elementy ktore este na stranke niesu nemozu mat udalosti. Tie im pridas az po ich zacleneni do stranky.
Gavier
Profil
pcmanik:
Použil jsem append, děkuji za radu. Pokud to dobře chápu, tak tedy události pro ty vkládané elementy musím vložit také v appendu? Zkusil jsem to, ale stále mi to nejde. Kod ted vypadá takhle:
$(".more").click(function(){
$("#content").append("<div id\=\"overlay\"><a onclick\=\"alert(\"ASDFDS\");\">odkaz<\/a><\/div><script type\=\"text/javascript\">$(\"#overlay\")\.click(alert(\"ASDFDS\");<\/script>");
});

Když dám zobrazit zdrojový kod výběru tak mi to ve firefoxu zobrazí:
<a onclick="alert(" asdfds");"="">odkaz</a>

Pokud dám prozkoumat prvek tak mi to zobrazuje (také ve firefoxu):
<a asdfds");(=(( onclick"alert(">odkaz</a>

Myslel jsem, že je to špatnou syntaxí kokrétně escape sekvencí. Proto jsem přidal do kodu ty backslashe, ale nijak se to neprojevilo.
pcmanik
Profil
Gavier:
Az za appendom staci zavolat tu obsluhu udalosti - teda priradenie udalosti click na id overlay.
Gavier
Profil
pcmanik:
Děkuji už to funguje, výsledný kód:

$(".more").click(function(){
  $("#content").append('<div id="overlay"><div id="more"></div></div>');
  $("#overlay").click(function(){
    $("#overlay").remove();
  });
});
pcmanik
Profil
Gavier:
Este v tej udalosti click pouzi namiesto $("overlay").remove() $(this).remove().
Jquery potom nemusi znovu hladat element na stranke ale pouzije jeho referenciu ktora je ulozena prave v objekte this, usetris tym trosku vykonu a zrychlis aplikaciu ;)
_es
Profil
pcmanik:
pouzi namiesto $("overlay").remove() $("this").remove().
Snáď asi $(this).remove().
pcmanik
Profil
_es:
Ano moja chyba, dakujem za opravu :)
1Pupik1989
Profil
Nebo:

$(".more").click(function(){
  var more = $("<div/>",{id:"more"}).text("Nějaký text");
  $("<div/>",{id:"overlay"}).append(more).click(function(){
    $(this).remove();  
  }).appendTo("#content");
});
pcmanik
Profil
1Pupik1989:
V com je tvoj kod lepsi? Je menej prehladny a spotrebuje viac casu na vykonanie.
1Pupik1989
Profil
pcmanik:
Nevím, prostě když používám JQuery, tak přes JQuery vytvářím i Elementy. Kdybych je nechtěl vytvářet přes JQuery, tak bych JQuery v tomto případě vůbec nepoužil.

Navíc znatelné spotřebování času na vykonání jsem nezaznamenal. 0 - 1ms stejně jako kód výš.
Chamurappi
Profil
Reaguji na 1Pupika1989:
Navíc znatelné spotřebování času na vykonání jsem nezaznamenal.
Obhajovat cokoliv neefektivního či vyloženě blbého tím, že jsou počítače a prohlížeče rychlé, je trestuhodně hloupé. Tvůj kód je navíc hůř čitelný a odfláknutý, takže neefektivita nemá žádné polehčující okolnosti.
1Pupik1989
Profil
Dobrá, sice nechápu co je na tom tak strašně "špatného", takže to vzdávám. Pod slovem "odfláknutý" si dokážu představit leccos.
O počítačích a prohlížečích jsem se vůbec nezmiňoval, pouze že jsem nic nezaznamenal.

Jinak kód jsem poupravil.

Není to náhodou to samé jako viz. níže?
.html('<div id="overlay"><div id="more"></div></div>')
.innerHTML = '<div id="overlay"><div id="more"></div></div>')

Neberte to ve zlém, ale teď vás nějak nepobírám. Asi bych se měl vrátit k základům Javascriptu.
pcmanik
Profil
1Pupik1989:
Nedeklaroval si premenne predtym, naviac zbytocne volas niektore jQuery metody, naco volat priradenie atributu id do elementu, ked mozes rovno vytvorit element, ktory ten atribut uz v sebe ma?
Upravujes domovu strukturu o 2 krat viac ako Gavier a nema to ziadne opodstatnenie.

Ak stale neveris, ze tvoje riesenie mrha vykonom pozri sa na test.

// Edit1: Ako prave pozeram tvoje riesenie je s vykonom v IE 9 doslova zalostne.
// Edit2: Pridal som aj cisty Javascript
1Pupik1989
Profil
Ja marne počítal s tìm, že se někde s těmi elementy bude dál pracovat, v tomto případě ne.

Co jsem četl v testech, tak jquery je brzda.

Doufám, že mi začátečnické chyby odpustíte. Navíc jquery je moje letmá smrt.

v ie9 0.9ms, takže to nepoznám a žádný performance tester neznám.
pcmanik
Profil
1Pupik1989:
Od toho je diskusia, aby sa tu kazdy naucil nieco nove :)
1Pupik1989
Profil
Ano, toť pravda. Mě hlavně nedošlo, že to more se dál používat nebude. Já čekal k tomu i navigaci.

Člověk se stále učí. Nejhorší je, že složité věci vyřeším, ale ty jednoduché mi vrtají hlavou.
Gavier
Profil
Díky za rady,
ještě mám jeden dotaz. Do "#more" vkládám další obsah stránky, pokud ho vkládám pomocí JS tak vše funguje jak má. Příjde mi to ale trochu nepřehledné a hůř upravitelné (myslím ten kokrétní vkládaný html kod) chtěl jsem pomocí appendu nebo innerHTML vložit PHP include, ale nefunguje mi to. Pomocí JS mohu vložit jen HTML kod?
$("#more").append('<? include("./osvezovna.php") ?>');
jenikkozak
Profil
Gavier:
PHP příkazy se zpracovávají na serveru, JS se provádí až s výsledkem, který server pošle prohlížeči. Takto, jak uvádíš, se obě technologie spojit dají, ale možná to udělá něco jiného, než máš v plánu. Záleží na tom, co je obsahem souboru vloženého pomocí include a čeho vlastně chceš dosáhnout.
Aldred
Profil
javascript se provadi az na strane uzivatele (vicemene to provadi prohlizec), pricemz PHP se zpracovava na strane serveru. Pokud chces nacitat nejakym zpusobem data ze serveru pomoci javascriptu, musis pouzit AJAX
Gavier
Profil
jenikkozak, Aldred:
Potřeboval bych do toho obsahu vkládaného pomocí JS vložit php galerii, kterou mám už hotovou bokem. Zkusím nastudovat AJAX, díky.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: