web-dev-qa-db-fra.com

Utilisez jquery click pour gérer l'ancre onClick ()

J'ai un ensemble de balises d'ancrage générées dynamiquement dans une boucle for comme suit:

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

Une fois ce code exécuté, la sortie html de l’un des cas ressemblerait à ceci:

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

Maintenant, je veux afficher différents textes en cliquant sur les liens ci-dessus. openSolution () ressemble à ceci:

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

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

    });
}

Lorsque je l'exécute et que je clique sur l'un des liens, le flux ne vient pas à l'intérieur du gestionnaire de clics jQuery. Je l'ai vérifié par les alertes ci-dessus utilisées. Il affiche uniquement l'alerte - 'ici' et non l'alerte - 'ici dans'. En cliquant sur le lien une deuxième fois, tout fonctionne parfaitement avec la valeur correcte de divId.

javascriptjqueryclickanchor
63
crazy_coder

La première fois que vous cliquez sur le lien, la fonction openSolution est exécutée. Cette fonction lie le gestionnaire d'événements click au lien, mais ne l'exécutera pas. La deuxième fois que vous cliquez sur le lien, le gestionnaire d'événements click sera exécuté.

Ce que vous faites semble en quelque sorte faire échec à l’utilisation de jQuery en premier lieu. Pourquoi ne pas simplement lier l'événement click aux éléments en premier lieu:

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

De cette façon, vous n'avez pas besoin d'attributs onClick sur vos éléments.

Il semble également que vous ayez plusieurs éléments avec la même valeur id ("solTitle"), qui n'est pas valide. Vous auriez besoin de trouver une autre caractéristique commune (class est généralement une bonne option). Si vous modifiez toutes les occurrences de id="solTitle" en class="solTitle", vous pouvez alors utiliser un sélecteur de classe:

$(".solTitle a")

Dupliquer les valeurs id non valides, le code ne fonctionnera pas comme prévu si vous faites face à plusieurs copies du même id. Ce qui a tendance à se produire est que la première occurrence de l'élément avec cette variable id est utilisée et que toutes les autres sont ignorées.

93
James Allardice

Prenons une balise anchor avec un événement onclick, qui appelle une fonction Javascript.

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

Maintenant, en javascript, écrivez le code ci-dessous

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

Cela vous montrera une alerte de "1" ....

8
Tapan kumar

Le HTML devrait ressembler à:

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

Et le javascript:

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

Voir l'exemple: 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'); */

    });
 });

J'ai changé peu de choses:

  1. supprime l'événement onclick et lie l'événement click au sein du document.ready
  2. changement de solTitle pour être un ID en CLASS: id ne peut pas être répété
3
Toni Michel Caubet

Vous ne pouvez pas avoir plusieurs fois le même ID pour des éléments. C'est censé être unique.

Utilisez une classe et rendez vos identifiants uniques:

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

Et utilisez le sélecteur de classe:

$('.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

Vous affectez un événement onclick à l'intérieur d'une fonction. Cela signifie qu'une fois que la fonction a été exécutée une fois, le deuxième événement onclick est également affecté à l'élément.

Attribuez la fonction onclick ou utilisez jquery click().

Il n'y a pas besoin d'avoir les deux

1
clem