J'ai un petit problème où ma fonction de clic se déclenche au premier clic. La fonction fonctionne cependant au deuxième clic. Voici un exemple de mon code.

function returnReviews() {
$(".bv-read-review ").click(function() {
$('html, body').animate({
    scrollTop: $(".bv-action-bar-header").offset().top
}, 700);
});
}; 

La deuxième partie de mon code où la fonction est appelée est ici, ci-dessous est un exemple de la partie pertinente.

$(document).ready(function() {
var bvrrDiv = $('#bvReview');
var productId = bvrrDiv.attr("data-productid");
    bvrrDiv.append("<a class='bv-read-review' data-productid='" + productId      + "' href='javascript:returnReviews();'\">Read reviews</a>");

Ce que j'essaie de réaliser, c'est au premier clic d'un lien pour que l'écran défile jusqu'à une div particulière.

La première fonction se trouve en haut du fichier JS tandis que la seconde se trouve en bas.

Je suis relativement nouveau chez jQuery, donc toute aide serait grandement appréciée.

Sincères amitiés,

0
Nat 7 mars 2016 à 17:14

3 réponses

Meilleure réponse

Vous appelez la fonction lorsque l'élément est cliqué:

href='javascript:returnReviews();'

Mais qu'est-ce que cette fonction fait ?:

function returnReviews() {
    $(".bv-read-review ").click(function() {
        //...
    });
}

Il ajoute simplement un gestionnaire de clics. Rien d'autre. La prochaine fois que vous cliquerez sur l'élément, ce gestionnaire de clics sera invoqué. (Et un autre sera ajouté, encore et encore, jusqu'à ce que vous ayez de nombreux gestionnaires de clics essayant tous de faire la même chose en même temps.)

Au lieu de l'envelopper dans une fonction et d'appeler cette fonction en ligne, ajoutez simplement le gestionnaire de clic à la page:

$(document).on('click', '.bv-read-review', function() {
    $('html, body').animate({
        scrollTop: $(".bv-action-bar-header").offset().top
    }, 700);
});

Et puis vous n'avez pas à l'ajouter en ligne dans le balisage:

bvrrDiv.append("<a class='bv-read-review' data-productid='" + productId + "' href='#'\">Read reviews</a>");

Notez qu'un href sans lien est quelque peu une mauvaise pratique. Comme ce n'est pas réellement une "ancre" en soi, alors a n'est pas vraiment la bonne balise à utiliser. Un button conçu pour ressembler à une ancre, peut-être? Un span qui stylise le curseur en survol? Il y a beaucoup d'options. Ce que vous avez techniquement fonctionnera , mais peut causer de la confusion pour l'accessibilité (lecteurs d'écran, autres navigateurs non visuels, etc.) si cela vous inquiète.

3
David 7 mars 2016 à 14:21

L'élément doit être ajouté au DOM avec le gestionnaire de clic qui lui est lié. La façon dont vous l'avez écrit actuellement, vous avez une fonction appelée sur clic, qui ajoute ensuite un nouveau gestionnaire de clic. Avec JQuery, vous pouvez complètement éviter de placer des gestionnaires de clics JavaScript directement sur vos éléments comme ça. Chaque fois que vous appelez votre fonction returnReviews (), elle liera une autre instance de votre gestionnaire de clics à l'événement click. Voici un exemple simple: $('<a>link</a>').on('click',function(event){ /* do stuff */ }).appendTo('#somediv');

0
Ecropolis 7 mars 2016 à 14:27

Comme David l'a dit .. plus une approche plus propre serait mieux: jsfiddle

function returnReviews() {
  $('html, body').animate({
        scrollTop: $(".bv-action-bar-header").offset().top
    }, 700);
};
$(document).ready(function() {
  var bvrrDiv = $('#bvReview');
  var productId = bvrrDiv.attr("data-productid");
  jQuery('<a/>', {
    "href": "#",
    "data-productid": productId,
    "class": "bv-read-review",
    "click": returnReviews,
    "text": "Read reviews"
  }).appendTo(bvrrDiv);
});
0
0x3h 7 mars 2016 à 15:12