jquery binding clicca per l'attivazione dell'etichetta due volte

Question

Quando ho aggiunto una selezione all'etichetta e l'associazione per l'evento click, jquery si attiva due volte.

http://jsfiddle.net/d8Ax7/

html:

<label class="lol"> 
    <div> 
     bla 
    </div> 
    <div style="display:none;"> 
     <select></select> 
    </div> 
</label> 

javascript:

$("label.lol").on({ 
    click : function() 
    { 
     alert(1); 
    } 
}) 

come posso risolvere questo bug senza l'aggiunta di "per" attributo per le etichette?

Answer 1

So che ci sono già molte risposte a questa domanda ma sono vaghe.

$("label.lol").on({ 
    click : function() 
    { 
     alert(1); 
     return false; 
    } 
}); 

Ok, tutti hanno apprezzato. Problema risolto. Ma sorge la domanda Perché return false;.

Risposta in parole semplici: È un modo di dire al computer che restituisce dalla funzione, l'attività che ho dato a voi è completata. Niente più pasticci ora.

Answer 2

$("label.lol").off("click").on(//... 

ma se è sparare due volte significa sicuramente avete legato due volte in modo da utilizzare .OFF è più un hack che la migliore soluzione al vostro problema, che sarebbe quello di capire come si finisce vincolante due volte questo evento .. . & sicuramente il codice si mostra non spiega questo doppio legame

edit: & nel vostro violino per davvero innescare una sola volta ...

Answer 3

si potrebbe provare a utilizzare il marchio del "per" attributo per collegarlo ad una selezione al di fuori di esso. Vedere il mio esempio

<label for="test" class="lol"> 
    <div> 
     bla 
    </div> 
</label> 

<div style="display:none;"> 
    <select id="test"></select> 
</div> 

http://jsfiddle.net/d8Ax7/1/

Answer 4

questo modo che funziona troppo, ma sono non comprendere appieno quello che stai cercando di fare ... E un'etichetta deve contenere solo un testo etichetta per la selezione e non contiene lo stesso scegliere ..

$("label.lol div:first").on({ 
     click : function() 
     { 
      alert(1); 
     } 
    }) 

Answer 5

ci sono due opzioni quando imperativi il clic verificare questa domanda stack overflow per maggiori dettagli, ma per riassumere provate questo ...

$("label.lol").click(function() { 
     alert(1); 
     return false; 
}); 

Answer 6

Il tuo markup è orribile .. Il tuo problema è che jquery sta facendo l'evento click su ogni div all'interno della tua funzione label - significa due volte. Dovresti pulire il tuo markup e chiedere al div che vuoi essere cliccabile direttamente. uso Else: prima per assicurarsi che l'evento viene generato solo una volta:

$('.lol div:first').click(function() 
{ 
    alert("1"); 
}) 

Answer 7

Si dovrebbe aggiungere e.preventDefault();

$("label.lol").on({ 
    click : function (e) 
    { 
    alert(1); 
    e.preventDefault(); 
    } 
}); 

Answer 8

il tuo problema è con la tua distinzione tra elements.e.g è necessario selezionare il primo figlio di un'etichetta con :first-child selettore, o dargli un id:

HTML:

<label class="lol"> 
    <div id="first-child"> 
     bla 
    </div> 
    <div style="display:none;"> 
     <select></select> 
    </div> 
</label> 

JS:

$("#first-child").on('click',function(){ 
     alert(1); 
}); 

http://jsfiddle.net/d8Ax7/5/

Answer 9

Prova a filtrare con CSS: aggiungi un int ermediate class clicked che impedisce il secondo avviso (o qualsiasi altra azione) e che rimuova lo .clicked per essere pronto per il prossimo round.

$("label.lol").on({ 
    click : function() 
    { 
     if (! $(this).hasClass('clicked')) 
      alert(1); 
     $(this).toggleClass('clicked'); 
    } 
})