jQuery - logica funzionamento show() hide() e tutto il resto

**PazZII** · 09-12-2009, 22:42

... troppo difficile definirlo nel titolo...
in pratica sto sperimentando le mie priem cosucce con jQuery e ho delle difficoltà ovvie perchè la materia mi è nuova.
Ad esempo sto facendo prove con show() e hide() ma non capisco come mai in un modo mi funziona e in un altro no..

Così funziona

codice:

$(function() {
	$(\"#open\").click(function() {
	$(\"#testhide\").show();
	return false;
	});

	$(\"#close\").click(function() {
	$(\"#testhide\").hide();
	return false;
	});
});

// l'html...

<a href=\"#\" id=\"open\">Apri</a> -<a href=\"#\" id=\"close\">Chiudi</a>

<div id=\"testhide\">
	Testo testo testo testo testo testo testo testo testo testo testo 
</div>

Così no...

codice:

$(function() {
	$(\"#open\").click(function() {
	$(\"#testhide\").show();
	return false;
	});

	$(\"#close\").click(function() {
	$(\"#testhide\").hide();
	return false;
	});
});

// l'html...

<a href=\"#\" id=\"open\">Apri</a>

<div id=\"testhide\">
	Testo testo testo testo testo testo testo testo testo testo testo 
	<a href=\"#\" id=\"close\">Chiudi</a>
</div>

L'unica differenza nel secondo caso è che il "bottone" di chiusura è dentro il div "testhide".

Come mai fa così?

**Nerlaleph** · 10-12-2009, 11:39

il problema non è jQuery, che è corretto, ma il markup. Se metti l'attributo "href" nel tag a, il browser farà aprtire l'azione corrispondente, nel caso href="#" cercherà un'ancora.
Hai due possibilità:
1) togli l'attributo href: in questo caso dovrai intervenire con css in quanto il browser non lo renderizzerà più come link ma come testo semplice;
2) modifichi jQuery:

codice:

$(function() {
	$("#open").click(function() {
		$("#testhide").show();
		return false;
	});

	$("#close").click(function(e) { 
                e.preventDefault();
		$("#testhide").hide();
		return false;
	});
});

e.preventDefault();: http://docs.jquery.com/Events/jQuery...tDefault.28.29

**PazZII** · 10-12-2009, 11:56

Mitico

**PazZII** · 10-12-2009, 17:51

Abbiate pietà però appena faccio una piccola variante non mi funziona mai più nulla....
Questo il codice, molto simile a sopra.

codice:

<script type="text/javascript">
$(function() {
	$("#open").click(function(e) {
	e.preventDefault(); // non servirebbe adesso che ho tolto l'href
	$("#testhide").show();
    	$("#opendiv").html("

Apri

");
	return false;
	});

	$("#close").click(function(e) {
	e.preventDefault(); // non servirebbe adesso che ho tolto l'href
	$("#testhide").hide();
	$("#opendiv").html("<a id='open'>Apri</a>");
	return false;
	});
$("#testhide").hide();
});
</script>
<style type="text/css">
<!--
a:hover {
cursor: pointer;
}
-->
</style>
</head>
<body>
<div id="opendiv">
<a id="open">Apri</a>
</div>
<div id="testhide">
	Testo testo testo testo testo testo testo testo testo testo testo
	<a id="close">Chiudi</a>
</div>

In pratica al click si apre il div e viene tolto il tag <a> alla scritta apri.
Al click su "Chiudi" il div si richiude e viene riassegnato il tag <a> alla scritta Apri ma qest'ultima non funziona più...
uff... criptico

**PazZII** · 10-12-2009, 21:22

bò up

**Nerlaleph** · 11-12-2009, 10:54

il motivo è semplice: quando tu inserisci dinamicamente del nuovo html nel DOM (la struttura della pagina), anche se questo ha lo stesso id di precedenti elementi, questo nuovo html non eredita la gestione degli eventi precedentemente assegnata, nel nostro caso l'evento "click" su <a id="open">.

Tenendo il tuo codice dovresti, dopo

codice:

$("#opendiv").html("<a id='open'>Apri</a>");

tornare ad assegnare

codice:

$("#open").click(function(e) { ...

come intuirai non ha molto senso nè è comodo. Mi chiedo infatti, perchè devi inserire novamente l'html?? hide e show non eliminano i tag, assegnano la regola css display: none / block.
Che effetto volevi ottenere?

**PazZII** · 11-12-2009, 11:46

ciao!
l'effetto che volevo ottenere è quello che al "click" su open, quest'ultimo diventasse in grassetto e non avesse più l'attributo <a> o cmq non avesse più la possibilità di essere RIcliccato (non volevo quindi che si riattivasse la funzione di apertura del div).

In pratica

Click su Open
- il div si apre
- appare nel div il link per "chiuderlo"
- diventa in grassetto la scritta Open e viene tolta la possibilità di essere cliccato

Click su Close
- il div si chiude
- la scritta Open non è più in grassetto e torna cliccabile

mmm sono sicuramente troppo "barocco" nel fare le mie procedure ...

**Nerlaleph** · 11-12-2009, 16:35

per il grassetto usa il metodo jQuery .css()
esempio:

codice:

$("#opendiv").css('fontWeight', 'bold');

per l'attivazione / disattivazione io farei cosi:
creo una function separata che gestisce l'apertura e chiusura (così non devo riscrivere codice).
poi, dopo il primo click faccio quel che devo fare, e poi gioco col bind .
oppure

codice:

$("#open").click(function(e) {
    	$(this).css('fontWeight', 'bold').bind('click', '');
	e.preventDefault(); // non servirebbe adesso che ho tolto l'href
	$("#testhide").show();
});

$("#close").click(function(e) {
 ...
  $("#open").click(function(e) {
    	$(this).css('fontWeight', 'bold').bind('click', '');
	e.preventDefault(); // non servirebbe adesso che ho tolto l'href
	$("#testhide").show();
  });
});

...

o qualcosa del genere. Scusa, ma vado un pò di fretta e non riesco a fare di meglio al volo

**PazZII** · 11-02-2010, 16:05

Ciao Nerlapeph
Scusa se rispondo solo adesso: ho cmq utilizzato e trovato utilissssimi i tuoi "insegnamenti" e sono riuscito a fare delle cosucce mooooolto carrrrine.
Ho risolto tutto quanto e quello che viene descritto in questo topic l'ho rimodellato e cambiato.
C'è una qualcosa però che mi piacerebbe approfondire a livello di design del codice perchè in effetti quello che sto facendo sta diventando abbastanza complesso e vorrei evitare accrocchi sul nascere.

Avrei bisogno che tu mi suggerissi una tua soluzione a questo (e ritorno Intopic):

quando tu inserisci dinamicamente del nuovo html nel DOM (la struttura della pagina), anche se questo ha lo stesso id di precedenti elementi, questo nuovo html non eredita la gestione degli eventi precedentemente assegnata

Ho in effetti capito il discorso e ad avevo ovviato inserendo le funzioni DOPO l'inserimento dinamico di nuovo html nel DOM.

Ma appena ho utilizzato un plugin che in maniera temporizzata mi aggiorna un <div> ecco che tutto cade perchè al primo ciclo ritorno al problema iniziale, e cioè che non eredita gli eventi precedentemente assegnati.

Come si risolve?

**PazZII** · 11-02-2010, 16:10

bè oddio... potrei annidare la funzione nel punto in cui temporizzo il caricamento del file esterno, così inserisce nel dom e assegna la funzione......così inserisce nel dom e assegna la funzione......così inserisce nel dom e assegna la funzione......così inserisce nel dom e assegna la funzione......così inserisce nel dom e assegna la funzione......
mmmmmm

Discussione: jQuery - logica funzionamento show() hide() e tutto il resto

Strumenti discussione

Ricerca discussione

Visualizza

jQuery - logica funzionamento show() hide() e tutto il resto

Permessi di invio