jQuery: trigger

Oggi proviamo a usare il trigger. Che cos’è?
Beh diciamo un evento virtuale, o meglio nel nostro codice associamo un evento a un azione che l’utente dovrebbe compiere,
ma indeterminate circostanze scateneremo noi l’evento da programmazione.

Preparimao due bottoni e due div, semplicemente ciascun bottone nasconde un div.
L’html:

<input type=”button” id=”btn1″ value=”box1″>
<input type=”button” id=”btn2″ value=”box2″>
<div></div>
<div id=”box1″></div>
<div id=”box2″></div>

Il css:

.pulisci{ clear:left;}
.box{ width:100px; height:100px; float:left; margin:10px;}
#box1{ background-color:#F60;}
#box2{ background-color:#F6F;}

Il comportamento normale sarebbe questo:

$(document).ready(function(e) {
$(‘#btn1′).click(function(){$(‘#box1′).hide();})
$(‘#btn2′).click(function(){$(‘#box2′).hide();})
});

Bottone->click->nascondo div associato.

Ora supponiamo di voler far in modo che cliccando sul secondo div si nasconda anche il primo,
ovviamente potremmo lavorare sui selettori, ma seguiremo la via del trigger, così:

$(‘#btn2′).click(
function(){
$(‘#box2′).hide();
$(‘#btn1′).trigger(‘click’);
})

Cioè oltre a nascondere il box verrà scatenato un click sul btn1 che quindi nasconderà il primo box.

Esempio