it-swarm.com.de

Verwende jquery click, um den Anker auf Click () zu handhaben.

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

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

Sobald dieser Code ausgeführt ist, sieht die HTML-Ausgabe für einen der Fälle folgendermaßen aus:

<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 unterschiedliche 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 Ablauf nicht in den jquery click handler. Ich habe es anhand der oben genannten Warnungen überprüft. Es wird nur die Warnung "hier" und nicht die Warnung "hier in" angezeigt. Wenn Sie das zweite Mal auf den Link klicken, funktioniert alles einwandfrei mit dem korrekten Wert von divId.

63
crazy_coder

Wenn Sie zum ersten Mal auf den Link klicken, wird die Funktion openSolution ausgeführt. Diese Funktion bindet den Ereignishandler click an den Link, führt ihn jedoch nicht aus. Wenn Sie das zweite Mal auf den Link klicken, wird der Ereignishandler click ausgeführt.

Was Sie tun, scheint den Punkt, an dem Sie jQuery verwenden, in erster Linie zu besiegen. Warum binden Sie das click -Ereignis nicht einfach an die Elemente?

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

Auf diese Weise benötigen Sie keine onClick Attribute für Ihre Elemente.

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

$(".solTitle a")

Da doppelte id Werte ungültig sind, funktioniert der Code nicht wie erwartet, wenn mehrere Kopien desselben id angezeigt werden. Was dazu neigt, ist, dass das erste Vorkommen des Elements mit diesem id verwendet wird und alle anderen ignoriert werden.

93
James Allardice

Nehmen wir ein Anchor-Tag mit einem onclick-Ereignis, 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" ....

8
Tapan kumar

Das HTML sollte so 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 das Beispiel: http://jsfiddle.net/kmendes/4G9UF/

5
Karl Mendes
<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 attr und binden Sie das click -Ereignis in das document.ready
  2. solTitle wurde geändert, um eine ID für eine KLASSE zu sein: Die ID kann nicht wiederholt werden
3

Sie können nicht mehrere Male 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 = ''; 

});
2
Didier Ghys

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

Weisen Sie entweder die Funktion onclick zu oder verwenden Sie jquery click().

Es ist nicht nötig, beides zu haben

1
clem