Verwenden Sie jQuery-Klick, um den Anker onClick() zu handhaben

Lesezeit: 5 Minuten

Benutzer-Avatar
crazy_coder

Ich habe eine Reihe von dynamisch generierten Anker-Tags in einer for-Schleife wie folgt:

<div id = "solTitle"> <a href = "#"  id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>';

Sobald dieser Code ausgeführt wurde, würde die HTML-Ausgabe für einen der Fälle wie folgt aussehen:

<div id = "solTitle"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br>

<div id = "solTitle"> <a href = "#"  id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br>

Jetzt möchte ich, dass beim Klicken auf die obigen Links verschiedene Texte angezeigt werden. openSolution() sieht so aus:

function openSolution() {
    alert('here');
    $('#solTitle a').click(function(evt) {
        evt.preventDefault();
        alert('here in');
        var divId = 'summary' + $(this).attr('id');

        document.getElementById(divId).className="";

    });
}

Wenn ich es ausführe und auf einen der Links klicke, kommt der Fluss nicht in den Jquery-Click-Handler. Ich habe es anhand der oben verwendeten Warnungen überprüft. Es zeigt nur die Warnung – „hier“ und nicht die Warnung – „here in“ an. Beim zweiten Klicken auf den Link funktioniert alles perfekt mit dem korrekten Wert von divId.

Benutzer-Avatar
James Allardice

Wenn Sie den Link zum ersten Mal anklicken, wird die openSolution Funktion ausgeführt wird. Diese Funktion bindet die click Event-Handler für den Link, aber er führt ihn nicht aus. Beim zweiten Klick auf den Link wird die click Event-Handler wird ausgeführt.

Was Sie tun, scheint den Sinn der Verwendung von jQuery überhaupt zu vereiteln. Warum binden Sie das Click-Event nicht gleich an die Elemente:

$(document).ready(function() {
    $("#solTitle a").click(function() {
        //Do stuff when clicked
    });
});

Auf diese Weise brauchen Sie nicht onClick Attribute auf Ihren Elementen.

Es sieht auch so aus, als hätten Sie mehrere Elemente mit demselben id Wert (“solTitle”), der ungültig ist. Sie müssten ein anderes gemeinsames Merkmal finden (class ist normalerweise eine gute Option). Wenn Sie alle Vorkommen von ändern id="solTitle" zu class="solTitle"können Sie dann einen Klassenselektor verwenden:

$(".solTitle a")

Da doppelt id -Werte ungültig ist, funktioniert der Code nicht wie erwartet, wenn er mehreren Kopien desselben gegenübersteht id. Was dazu neigt, ist das erste Auftreten des Elements damit id verwendet, alle anderen werden ignoriert.

  • das ist nicht gültig, da der #soltitle wiederholt wird

    – Toni Michel Caubet

    18. Januar 2012 um 10:07 Uhr

  • @ToniMichelCaubet – Das habe ich im letzten Absatz erwähnt. Ich denke, es könnte ein bisschen klarer sein, aber danke.

    – James Allardice

    18. Januar 2012 um 10:10 Uhr


  • Diese Antwort ist heutzutage veraltet. jQuery verwendet heute .on('click', function() { Anstatt von .click(function() {

    – Enrike

    8. August 2018 um 16:00 Uhr

Benutzer-Avatar
Tapan Kumar

Nehmen wir ein Anchor-Tag mit einem Onclick-Event, das eine Javascript-Funktion aufruft.

<a href="#" onClick="showDiv(1);">1</a>

Schreiben Sie nun in Javascript den folgenden Code

function showDiv(pageid)
{
   alert(pageid);
}

Dies zeigt Ihnen eine Warnung von “1”….

  • Das beantwortet die Frage eigentlich nicht. Die Frage war, wie man mit jQuery den Klick verarbeitet. Ihre Antwort funktioniert nur mit Vanille-Javascript und nicht mit jQuery.

    – Jakurtis

    22. Oktober 2016 um 18:51 Uhr

  • Ja, aber es hat mich zum Nachdenken gebracht. Das war in meinem Fall einfacher.

    – Steve Greene

    20. Februar 2019 um 21:10 Uhr

  • Das onclick-Ereignis hat einen Kleinbuchstaben c, keinen Großbuchstaben.

    – Merr Führer

    22. Mai 2020 um 20:40 Uhr

Der HTML-Code sollte folgendermaßen aussehen:

<div class="solTitle"> <a href="#"  id="solution0">Solution0 </a></div>
<div class="solTitle"> <a href="#"  id="solution1">Solution1 </a></div>

<div id="summary_solution0" style="display:none" class="summary">Summary solution0</div>
<div id="summary_solution1" style="display:none" class="summary">Summary solution1</div>

Und das Javascript:

$(document).ready(function(){
    $(".solTitle a").live('click',function(e){
        var contentId = "summary_" + $(this).attr('id');
        $(".summary").hide();
        $("#" + contentId).show();
    });
});

Siehe Beispiel: http://jsfiddle.net/kmendes/4G9UF/

  • Beachten Sie, dass live() ist in jQuery 1.7 veraltet und in 1.9 entfernt. Die empfohlene Methode zum Anhängen von Ereignis-Listenern ist on(). Referenz: api.jquery.com/live

    – Paul Smith

    27. Februar 2013 um 18:27 Uhr

Benutzer-Avatar
Toni Michel Caubet

<div class = "solTitle"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br>

<div class= "solTitle"> <a href = "#"  id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br>



$(document).ready(function(){
    $('.solTitle a').click(function(e) {
        e.preventDefault();
        alert('here in');
         var divId = 'summary' +$(this).attr('id');

        document.getElementById(divId).className=""; /* or $('#'+divid).removeAttr('class'); */

    });
 });

Ich habe ein paar Dinge geändert:

  1. Entfernen Sie das onclick-Attribut und binden Sie das Click-Ereignis innerhalb von document.ready
  2. solTitle in eine ID in eine KLASSE geändert: ID kann nicht wiederholt werden

Benutzer-Avatar
Didier Ghys

Sie können nicht mehrmals dieselbe ID für Elemente haben. Es soll einzigartig sein.

Verwenden Sie eine Klasse und machen Sie Ihre IDs eindeutig:

<div class="solTitle" id="solTitle1"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div>

Und verwenden Sie die Klassenauswahl:

$('.solTitle a').click(function(evt) {

    evt.preventDefault();
    alert('here in');
    var divId = 'summary' + this.id.substring(0, this.id.length-1);

    document.getElementById(divId).className=""; 

});

Benutzer-Avatar
Chandan Kumar

Sie weisen eine zu onclick Ereignis innerhalb einer Funktion. Das heißt, sobald die Funktion einmal ausgeführt wurde, das zweite onclick Ereignis wird dem Element ebenfalls zugewiesen.

Entweder die Funktion zuweisen onclick oder verwenden Sie jquery click().

Es ist nicht notwendig, beides zu haben

1112120cookie-checkVerwenden Sie jQuery-Klick, um den Anker onClick() zu handhaben

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy