Jquery load

2 svar · 533 visningar · startad av qazboy 8 feb. 2008

qazboyMedlem sedan feb. 20082 inlägg

Frågan8 feb. 2008 15:39#1

Jag är nybörjare på Jquery och javascript som helhet och skulle behöva lite hjälp.

Om jag laddar en extern sida med load() i jquery hur kan jag då komma åt de id som finns där? Den externa sidan innehåller bla knappar som jag vill kunna koppla till funktioner i jquery.

qazboyMedlem sedan feb. 20082 inlägg

15 feb. 2008 08:21#2

Förtydligande av fråga

Inser att min fråga måste vara otydlig. Jag bifogar ett litet exempel på vad jag menar. Nu vill jag naturligtvis göra andra saker än att skicka upp en alert, men det fattar ni.

Om det är så att detta inte ska funka berätta då gärna varför. Finns det ett sätt att få det att funka vill jag självklart veta hur.

index.html
-----------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
    <title>Titel</title>
    <script src="../js/jquery.js" type="text/javascript"></script>
     <script type="text/javascript">
     
     $(document).ready( function() {
        // Kanpp 1 laddas externt
        $('input#knapp').click(function(){
            alert('Du klickade knapp 1');
        });
        // ladda knapp 1
        $('div#extern').load('extern.html');
        //Knapp 2 finns i koden och funkar
        $('input#knapp2').click(function(){
            alert('Du klickade knapp 2');
        });
     });
     </script>
</head>
<body>
    <div id="extern"></div>
    <input type="BUTTON" value="Knapp 2" id="knapp2"> 
    
</body>
</html>

extern.html
------------

<input type="BUTTON" id="knapp" value="Knapp 1">

voigtann1Medlem sedan juni 20019 519 inlägg

15 feb. 2008 08:37#3

.load är en ajax lösning(tror jag?). så om du har input#knapp i din extern.html så måste du köra en eval() efter att du har kört ajaxen.
Så du få ha en div,innehåll som du kan ta innerHTML ifrån och köra en eval().

extern.html:

<div id="script" style="display:none;">
        $('input#knapp').click(function(){
            alert('Du klickade knapp 1');
        });
</div>

$.ajax({
	url: "extern.html",
	success: function(data) {
		$('div#extern').html(data);
		var em = document.getElementById("script");
		if(em) {
			eval(em.innerHTML);
			em.parentNode.removeChild(em);
		}
	}
});