Pulsante Radio all'interno elemento di ancoraggio viene ripristinato dopo jQuery click gestore
https://stackoverflow.com/questions/4614371
-
26-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Ho una situazione in cui un elemento, di tipo di radio, è contenuto in un elemento. L'elemento di ancoraggio ha un href ma voglio ignorare che il comportamento con l'aggiunta di un jQuery 'click' gestore per l'elemento.
Il gestore clic rende il pulsante di scelta al suo interno quello selezionato all'interno del gruppo. Questa tutte le opere quando l'ancora viene cliccato, tuttavia, quando il pulsante di scelta viene cliccato sembra che jQuery ripristina la radio selezionata a quella precedentemente selezionata!
Ecco una pagina semplificata che duplica il problema:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#a1").click(function(event) {
anchorClicked("a1");
return false;
});
$("#a2").click(function(event) {
anchorClicked("a2");
return false;
});
});
function anchorClicked(anchorId) {
$('#' + anchorId + ' input:radio').attr("checked", true);
alert("Look at what is selected and what happens after the event when this dialog is closed!");
}
</script>
</head>
<body>
<form>
<ul>
<li id="li1">
<a id="a1" href="javascript:alert('default functionality')">
<input value="1" name="rb" type="radio" id="rb1">
<span>Details 1</span>
</a>
</li>
<li id="li2">
<a id="a2" href="javascript:alert('default functionality')">
<input value="2" name="rb" type="radio" id="rb2">
<span>Details 2</span>
</a>
</li>
</ul>
</form>
</body>
Qualcuno ha qualche idea di come posso impedire jQuery per ripristinare il pulsante di opzione?
Soluzione 3
Il modo più semplice che ho trovato per risolvere questo problema è quello di rimuovere l'attributo href dall'elemento di ancoraggio durante l'evento click:
$("#a1").click(function(event) {
this.removeAttribute("href");
anchorClicked("a1");
});
Questo significa che non hanno più bisogno di ritornare false per evitare il comportamento predefinito e la bolla evento può effettuare il DOM in modo sicuro e tutto quindi funziona.
Altri suggerimenti
<script type="text/javascript">
$(document).ready(function() {
$("input:radio").click(function(event){event.stopPropagation();});
});
Questo è un modo un po 'strano di fare le cose. È possibile ottenere l'effetto si sta dopo in primo luogo utilizzando un elemento label al posto della campata in questo modo:
<label><input value="1" name="rb" type="radio" id="rb1" /> Details One</label>
<label><input value="2" name="rb" type="radio" id="rb2" /> Details Two</label>
In questo modo ovunque clic nell'elemento label selezionerà il pulsante di opzione.
Da lì si dovrebbe guardare per un evento di modifica sui pulsanti di scelta se si desidera:
$('input:radio[name="rb"]').change(function() {
if (this.checked) {
alert('remember the deselected radio button changes also');
}
});
Il problema è che il "falso ritorno" per annullare il comportamento tag di ancoraggio di default è anche annullando il comportamento del clic sul pulsante di scelta in modo che la mette di nuovo a quello che era in origine, a prescindere dalle azioni del evento click . Impostazione dei fucntions per tornare veri presenta il comportamento atteso (come pure la funzione di default click).
Per risolvere il problema, infine, si vuole sbarazzarsi della manifestazione click di default completamente. Per fare questo si potrebbe molto semplicemente cambiare l'href di "#" in modo che non fa molto quando azionato. Vedere http://jsfiddle.net/FrcRx/1/ per un esempio di questo in azione.
il modo migliore per farlo sarebbe quello di rimuovere completamente l'attributo href. Questo naturalmente rende la maggior parte dei browser non considerano un link in modo che avrebbe bisogno di applicare uno stile adeguato se stessi per farli apparire come i collegamenti ancora.
Questo viene fatto con la funzione removeAttr jquery e la funzione addClass. Vedere una demo di qui: http://jsfiddle.net/FrcRx/2/
$('input:radio').click(function(e) {
e.stopPropagation();
});
$('a[id^="a"]').click(function(e) {
$('input:radio:first', this).attr("checked", true);
return false;
});
La parte importante è fermare la propagazione della manifestazione clic quando il pulsante viene premuto. Tuttavia sembra che se si torna falsa quindi il pulsante di scelta non è selezionare come ci si aspetta che sia.
Poi si legano l'evento click a qualsiasi tag a che ha un id inizia con la lettera "a". Quando si fa clic è selezionata la prima all'interno di ingresso pulsante di scelta del tag a e poi controllato.
