Jquery .html() "elveszik" a többi funkció?
2021-11-29T09:07:06+01:00
2021-11-29T10:57:13+01:00
2022-08-12T05:50:29+02:00
kviktor1230
Sziasztok, az miért van ha szeretnék egy oldalt betölteni jquery .html() módszer segitsegével akkor az eredeti oldalon lévő funkciók nem működnek a betöltött oldalon lévő elemekkel? Csináltam egy gyors példát: 

TEST.html

<html> <head> <script src="jquery.min.js"></script> </head> <body> <div id="containerloadpage"></div> <div id="container"> <button id="testbutton">TESTBUTTON</button> </br> <button id="loadbutton">Betöltöm a másik oldalt</button> </div> <script> $('#testbutton').click(function(){ alert("Működöm"); }); $('#loadbutton').click(function(){ $.ajax({ url:"load.php", success:function(response) { $("#container").remove(); //Próbáltam a HIDE()-t is. $('#containerloadpage').html(response); } }); }); </script> </body> </html>
load.html:

<button id="testbutton">TESTBUTTON</button>

Köszönöm mindenkinek a segitseget!
Mutasd a teljes hozzászólást!
Újra kell tölteni a script-eket.

$('#testbutton').click(function(){ alert("Működöm"); }); $('#loadbutton').click(function(){ $.ajax({ url:"load.php", success:function(response) { $("#container").remove(); //Próbáltam a HIDE()-t is. $('#containerloadpage').html(response); var scripts = $('#containerloadpage')[0].querySelectorAll("script"); Object.keys(scripts).forEach(function(s){ if(typeof scripts[s] == "object"){ var ns = document.createElement("script"); ns.type = "text/javascript"; ns.appendChild(document.createTextNode(scripts[s].firstChild.data)); scripts[s].parentNode.appendChild(ns); scripts[s].parentNode.removeChild(scripts[s]); } }); } }); });
Mutasd a teljes hozzászólást!

  • Nem teljesen tiszta, hogy mit csinálsz, és miért pont így, de ha új elem "képződik", akkor arra is rá kellene akasztani a megfelelő eseménykezelőket (pl. click), hogy működjenek...

    Pl.:

    (...) success:function(response) { $("#container").remove(); //Próbáltam a HIDE()-t is. $('#containerloadpage').html(response); $('#testbutton').click(function() { alert("Működöm én is"); }); } (...)
    Mutasd a teljes hozzászólást!
  • Köszi szépen a válaszod, és ha mondjuk kicsit többre lenne szükségem mint egy alert-ra akkor meghivhatom a JS fájlomat a betöltendő (load.html) fájlban is? 
    Azaz lenne egy scriptek.js fájlom ami szerepelne a test.html illetve load.html ben is.
    Köszi!
    Mutasd a teljes hozzászólást!
  • Újra kell tölteni a script-eket.

    $('#testbutton').click(function(){ alert("Működöm"); }); $('#loadbutton').click(function(){ $.ajax({ url:"load.php", success:function(response) { $("#container").remove(); //Próbáltam a HIDE()-t is. $('#containerloadpage').html(response); var scripts = $('#containerloadpage')[0].querySelectorAll("script"); Object.keys(scripts).forEach(function(s){ if(typeof scripts[s] == "object"){ var ns = document.createElement("script"); ns.type = "text/javascript"; ns.appendChild(document.createTextNode(scripts[s].firstChild.data)); scripts[s].parentNode.appendChild(ns); scripts[s].parentNode.removeChild(scripts[s]); } }); } }); });
    Mutasd a teljes hozzászólást!
abcd