Forum Mjukvara Programmering och digitalt skapande Tråd

[jQuery] .parent().hide() fungerar inte

1
Skriv svar
Permalänk
Medlem
●

[jQuery] .parent().hide() fungerar inte

html

<div id="parent"><a href="javascript:void(0)" id="child">Klicka här!</a></div>

jQuery

$('#child').click(function(){
	$('#parent').hide();
	//alternativt: $(this).parent().hide();
});

Av någon anledning så fungerar inte detta över huvud taget, någon som har en idé?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag kommer tyvärr inte ihåg hur man gör men testa att debugga lite. Tex:
alert($(this).parent());
och
alert($(this).parent().id());

se om det ser rätt ut

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Pie-or-paj:

Jag kommer tyvärr inte ihåg hur man gör men testa att debugga lite. Tex:
alert($(this).parent());
och
alert($(this).parent().id());

se om det ser rätt ut

Gå till inlägget

Kan inte prova det nu, men det borde se rätt ut i.o.m. att dessa exempel fungerar:

$('#child').click(function(){
	$('#child').hide();
});
$('#parent').click(function(){
	$('#parent').hide();
});
$('#parent').click(function(){
	$('#child').hide();
});

Det är bara när jag försöker stänga parent från child det inte fungerar =/

$('#child').click(function(){
	$('#parent').hide();
});
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

jag testade lite snabbt och det fungerar i Chrome och IE iaf. (med jQuery 1.5.2)

bara för att utesluta "enkla" missar:
- registrerar du din click-handler i $(document).ready()? (eller motsvarande)
- har du någon click-handler vars uppgift är att visa parent? var ligger isf det elementet?

Bara för sakens skull inkluderar jag hela test-sidan jag pillade ihop:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min..."></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#child').click(function(e){
        $('#parent').hide();
    });
});
</script>
<style type="text/css">#parent{border:1px solid black;}</style>
</head>
<body>
<div id="parent"><a href="javascript:void(0)" id="child">Test</a></div>
</body>
</html>
Visa signatur

as far as we can tell, the massacre went well...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Här är en kodsnutt som reproducerar felet:

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style type="text/css">#parent{border: 1px solid black;display: none;}</style>
</head>
<body>
	<a href="javascript:void(0);" id="show">Show</a>
	<div id="parent"><a href="javascript:void(0);" id="child">Hide</a></div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min..."></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#child').click(function(){
			$('#parent').hide();
		});
		$('#show').click(function(){
			//$('#parent').html('<a href="javascript:void(0);" id="child">Hide</a>');
			$('#parent').show();
		});
	});
	</script>
</body>
</html>

Anledningen till att det inte fungerar är alltså att jag genererat innehållet i #parent med javascript. Provar ni att avkommentera den kommenterade raden (rad 17) så kommer det inte att fungera längre. Någon som har en alternativ lösning? Kommer inte kunna gå ifrån att generera innehållet med javascript, så en lösning som inte går ifrån det behövs.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Okej nu har jag löst det, om man flyttar in $('#child').click() inuti $('#show').click() så fungerar det utmärkt.

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style type="text/css">#parent{border: 1px solid black;display: none;}</style>
</head>
<body>
	<a href="javascript:void(0);" id="show">Show</a>
	<div id="parent"><a href="javascript:void(0);" id="child">Hide</a></div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min..."></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$('#show').click(function(){
			$('#parent').html('<a href="javascript:void(0);" id="child">Hide</a>');
			$('#parent').show();
			$('#child').click(function(){
				$('#parent').hide();
			});
		});
	});
	</script>
</body>
</html>

Nu är jag inte sådär jätteinsatt i jQuery:s grunder. Någon som kan förklara varför det fungerar på det sättet?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Apro:

Okej nu har jag löst det, om man flyttar in $('#child').click() inuti $('#show').click() så fungerar det utmärkt.

Nu är jag inte sådär jätteinsatt i jQuery:s grunder. Någon som kan förklara varför det fungerar på det sättet?

Gå till inlägget

I ditt första exempel så försöker du sätta ett event på ett id som inte finns ännu.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

en möjlighet i sammanhanget är live().
något i stil med följande borde isf fungera (har inte testat):

$(document).ready(function(){
		$('#parent a').live('click', function(){
			$('#parent').hide();
		});
		$('#show').click(function(){
			$('#parent').html('<a href="javascript:void(0);">Hide</a>');
			$('#parent').show();
		});
	});
Visa signatur

as far as we can tell, the massacre went well...

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara