jquery : evento click sensibile solo per alcuni elementi

[groucho baffone]

Ciao a tutti, esperti e non!
Da ignorante di jquery devo modificare una funzione che fa apparire e scomparire un form di login attraverso il cambiamento della classe css. Il form compare al click sul pulsante di login e scompare al click su qualunque elemento della pagina, compresi gli input del form stesso.
E ovviamente quest'ultimi non dovrebbero essere esclusi dalla funzione!

il codice html

<div id="dd" class="wrapper-dropdown-3" alt="nascosto" tabindex="1">
  <span>Log In</span>
  <ul id="ddForm" class="dropdown">[*]
      <form class="form-1">
        

 <input type="text" id="email" name="ind_email" placeholder="email" onfocus="decoloraDato(this)"> </p>
        

 <input type="password" id="pw" name="pass_word" placeholder="password" class="showpassword" onfocus="decoloraDato(this)"> </p>
        <p id='ricordaDati' style="float:left;" onclick="ricordaDatiAccesso()"> [img]img/spunta_vuota.jpg[/img] ricordami </p>
        <p style="margin-top:0; float:right;"> <input type="submit" id="plsLogin" name="submit" value="Accedi"> </p>
      </form>​​[*]Ho perso la mia password![*]Registrati a maremmaweb[/list]
</div>

il codice jquery

<script type="text/javascript">
  function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
  }

  DropDown.prototype = {
    initEvents : function() {
      var obj = this;
      obj.dd.on('click', function(event){
        $(this).toggleClass('active');
        return false;
        });
      obj.opts.on('click',function(){
        var opt = $(this);
        obj.val = opt.text();
        obj.index = opt.index();
        obj.placeholder.text(obj.val);
        });
      },
    getValue : function() {
      return this.val;
      },
    getIndex : function() {
      return this.index;
      }
    }

  $(function() {
    var dd = new DropDown( $('#dd') );
    $(document).click(function() {
      // all dropdowns
      $('.wrapper-dropdown-3').removeClass('active');
      });
    });
</script>

nel codice javascript, la classe wrapper-dropdown-3 ha opacità 0, quella .wrapper-dropdown-3 active ha 1
basta intervenire su

$(document).click(function() {

?
come escludo gli elementi del form da tutti gli altri?

[Nobody33]

$(document).click(function(e){
      if ( !$(e.target).is('.form-1') ) {

 $('.wrapper-dropdown-3').removeClass('active');
}

se vuoi inserire + classi, lo fai separati da una virgola ma sempre dentro li apici

('.form-1, .form-2, .ecc')

Altrimenti puoi farti un contenitore tipo

#overlay{
	display:none; 
	position:fixed; 
	_position:absolute; 
	height:100%; width:100%; 
	top:0; left:0;
	z-index:11;

che fai apparire quando appare il form; per fare scomparire il form, assegni il click ad #overlay.

[groucho baffone]

nisba.. accidenti!
ero pronto ad esultà e invece l'eccezione jquery un funziona.
Ho provato dando l'id del ul e poi la sua classe ma il risultato non cambia.
Ho anche provato il secondo metodo ma niente. Credevo che la funzione jquery dei guai interferisse, ma togliendola si impedisce anche la comparsa del form...



link alla pagina

[Nobody33]

 <div id="ddForm" style="display:none;" class="dropdown">
test test
</div>
<script type="text/javascript">
			$(document).ready(function(){
	
	function Form() {
		if ($("#ddForm").is(":hidden")){
			$("#ddForm").show();
			$("#overlay").show();
			
		}
		else{
			$("#ddForm").hide();
			$("#overlay").hide();  
		}
	}
	 $(".wrapper-dropdown-3").click(function(){Form()});
	  $("#overlay").click(function(){Form()});
	});
			
</script>

nel master css riga 213 (.wrapper-dropdown-3) devi togliere l'opacity:0;

e

 
<div id="overlay"> </div>

lo metti prima della chiusura del body con le impostazioni che hai già.

Ciò rende il tutto più semplice

[groucho baffone]

più semplice ma non efficace..

intanto grazie per tutte le risposte che mi hai dato, nobody33
purtroppo neanche l'ultima variante fa funzionare il login.. e come può funzionare se il form si trova ad uno z-index inferiore a quello di overlay?

se ci sono altre proposte, ben vengano.. una soluzione valida mi sembrava quella dell'eccezione sull'elemento cliccato e partendo dalle info che mi ha dato nobody33 provo a crearne una avventurandomi nel sito di jquery

link alla pagina di prova

[Vindav]

$(document).click(function(e){
  if($("#ddForm").is(":visible") && $("#dd").find(e.target).length === 0){
    $("#ddForm").hide();
  }else{
    $("#ddForm").show();
  }
});

[groucho baffone]

link alla pagina con l'ultimo tentativo

potrei anche azzardare e modificare il codice affinchè il login compaia al solo click sul pulsante di login ma comunque si perde l'effetto dissolvenza e soprattutto il form non viene "sentito" dal mouse

comunque grazie Vindav

[Vindav]

e soprattutto il form non viene "sentito" dal mouse

C'è sicuramente qualche div che va sopra al form, tieni conto che ho eliminato le istruzioni $("#overlay").show(); e $("#overlay").hide(); se ti servono riaggiungile. In linea generale, il codice è quello, se integrato in una pagina con effetti/overlay ecc.. va sistemato. Ma ci devi pensare tu. Dubito che qualcuno si metta a studiarsi tutta la pagina.

[groucho baffone]

avevo notato l'assenza degli script per l'overlay e avevo tolto il div #overlay che andava sopra al form riportando la pagina allo stato iniziale, quello in cui il mouse "avvertiva" il form.
Studiando i codici che mi avete dato, cerco la soluzione

grazie ad entrambi

[Vindav]

per "debuggare" metti le seguenti istruzioni:

$(document).click(function(e){
  alert($(e.target).get(0).tagName);
  alert($(e.target).attr("id"));
  alert($(e.target).attr("class");
  if($("#ddForm").is(":visible") && $("#dd").find(e.target).length === 0){
    $("#ddForm").hide();
  }else{
    $("#ddForm").show();
  }
});

Cosi vedi cosa effettivamente stai cliccando, da un occhiata veloce sembra che il div wrapper stia sempre sopra al tooltip.