Optionsfeld im Ankerelement wird nach jQuery-Klickhandler zurückgesetzt

Ich habe eine Situation, in der ein Element vom Typ radio in einem Element enthalten ist. Das Ankerelement hat eine href, aber ich möchte dieses Verhalten überschreiben, indem Sie dem Element einen jQuery-Klick-Handler hinzufügen.Optionsfeld im Ankerelement wird nach jQuery-Klickhandler zurückgesetzt

Der Click-Handler macht das Optionsfeld innerhalb des ausgewählten Optionsfelds innerhalb der Gruppe. Das alles funktioniert, wenn auf den Anker geklickt wird. Wenn der Radiobutton angeklickt wird, wird jedoch angezeigt, dass jQuery das ausgewählte Radio auf den zuvor ausgewählten zurücksetzt!

Hier ist eine der vereinfachte Seite, die das Problem Duplikate:

<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>

Hat jemand eine Idee, wie ich jQuery zum Zurücksetzen der Radiobutton verhindern kann?

Quelle

2011-01-06 GrievousAngel

Der einfachste Weg, die ich gefunden habe, dieses Problem zu lösen, ist das href Attribut aus dem Ankerelement während des Click-Ereignis zu entfernen:

$("#a1").click(function(event) { 
    this.removeAttribute("href");    
    anchorClicked("a1"); 
    });

Das bedeutet, dass ich nicht mehr müssen falsch zurückgeben, um das Standardverhalten zu verhindern, und das Ereignis kann das DOM sicher aufblasen und alles funktioniert dann.

Quelle

2011-01-06 16:15:44 GrievousAngel

Habe gerade gemerkt, dass du mich dafür geschlagen hast. :) Ja, das Problem ist die Aufhebung der Radio-Buttons ändern Ereignis so das funktioniert. – Chris

Aber Sie können nicht auf einen Anker klicken, der kein 'href'-Attribut hat, naja, es ist zumindest kein gültiges Tag. –

Der Browser liefert möglicherweise keinen visuellen Hinweis, dass es sich um einen Link handelt, aber ich denke, dass ich eine: hover css-Regel bereitstellen kann, um den Zeiger zu ändern, was ich noch nicht tun kann. – GrievousAngel

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("input:radio").click(function(event){event.stopPropagation();}); 

    });

Quelle

2011-01-06 11:44:21

Sorry Jishnu das behebt das Problem nicht. Das zuvor ausgewählte Optionsfeld bleibt nach dem Klicken auf das nicht ausgewählte Optionsfeld ausgewählt. – GrievousAngel

Ich dachte, es funktionierte, überprüfen Sie diesen Link - http://jsfiddle.net/MUgXY/ –

@Jishnu So stellt sich heraus, dass Sie die Antwort hatten. –

Dies ist eine etwas seltsame Art, Dinge zu tun. Sie können die Wirkung, die Sie nach dem ersten sind erhalten, indem ein label Element anstelle der Spannweite wie so mit:

<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>

dieses Klicken im label Elemente überall dabei das Optionsfeld wählt.

Von dort aus sollten Sie für ein Änderungsereignis auf den Radio-Buttons sehen, wenn Sie wollen:

$('input:radio[name="rb"]').change(function() { 
    if (this.checked) { 
     alert('remember the deselected radio button changes also'); 
    } 
});

Quelle

2011-01-06 11:47:48

Marcus, ich schätze die Hilfe. aber ich bin mit Ankerelementen festgefahren. – GrievousAngel

Entschuldigung, schneiden Sie meinen Kommentar kurz. Der HTML-Code wird von einer ASP.Net-Anwendung generiert, und die Anker stammen aus LinkButtons. [N.B. Ich kann die LinkButtons zu nichts anderem ändern. – GrievousAngel

Kein Problem, ich habe eine weitere Antwort hinzugefügt, die diese Einschränkung behandelt. –

$('input:radio').click(function(e) { 
    e.stopPropagation(); 
}); 

$('a[id^="a"]').click(function(e) { 
    $('input:radio:first', this).attr("checked", true); 
    return false; 
});

Der wichtige Teil Ausbreitung des Click-Ereignis wird beendet, wenn das Optionsfeld geklickt wird. Wenn Sie jedoch false zurückgeben, wird das Optionsfeld nicht so ausgewählt, wie Sie es erwarten würden.

Als nächstes binden wir das Klickereignis an ein beliebiges a Tag, das eine ID hat, die mit dem Buchstaben "a" beginnt. Wenn geklickt wird, wird die erste Optionsfeldeingabe innerhalb des Tags a ausgewählt und dann überprüft.

DEMO:http://jsfiddle.net/marcuswhybrow/mg66T/2/

Quelle

2011-01-06 14:16:36

Marcus, das macht dasselbe wie meine anchorClicked Methode in der Frage. Das Problem besteht darin, dass nach dem Auswählen eines Optionsfelds das andere nicht ausgewählt werden kann, indem Sie darauf klicken. Es ist initial selected, wird aber deaktiviert, sobald der Click-Event-Handler abgeschlossen ist. – GrievousAngel

Haben Sie diesen Code versucht (geändert, um 'return false' hinzuzufügen), nahm ich an, dass Ihr wegen der etwas komplizierten Einrichtung nicht funktioniert hat. Es gibt keinen Grund, warum das nicht funktionieren würde. –

@Marcus Whybrow: Ihre Annahmen waren falsch. Es hat nicht funktioniert, weil Ihre Rückkehr false die Aktion des Optionsfelds aufhebt und somit die Tatsache ändert, dass es geändert wird. Sehen Sie meine Antwort für einige Beispiele, die dies in Aktion zeigen. – Chris

Das Problem ist, dass Ihr "return false", um das Standard-Anker-Tag-Verhalten abzubrechen, auch das Verhalten des Klickens auf den Radio-Button aufhebt, so dass es zurücksetzt, was es ursprünglich war, unabhängig von den Aktionen des Klicks Veranstaltung. Wenn Sie die Funktionen so einstellen, dass sie "true" zurückgeben, wird das erwartete Verhalten (sowie die standardmäßige Klickfunktion) angezeigt.

Um es endlich zu beheben möchten Sie das Standard-Klickereignis vollständig loswerden. Um dies zu tun, könntest du einfach den href auf "#" setzen, damit er nicht viel tut, wenn er ausgeführt wird. Ein Beispiel hierfür finden Sie in http://jsfiddle.net/FrcRx/1/.

Der beste Weg, es zu tun wäre, das href-Attribut vollständig zu entfernen.Dies führt natürlich dazu, dass die meisten Browser es nicht als einen Link betrachten, also müssten Sie den entsprechenden Stil selbst anwenden, damit sie wie Links aussehen.

Dies geschieht mit der Funktion removeAttr jquery und der Funktion addClass. Sehen Sie eine Demo davon hier: http://jsfiddle.net/FrcRx/2/

Quelle

2011-01-06 16:23:39 Chris

Optionsfeld im Ankerelement wird nach jQuery-Klickhandler zurückgesetzt

Antwort

Verwandte Themen