1
votes

Utilisation de jquery comment rendre un élément cliquable une seule fois?

J'ai le code suivant dans mon fichier JS: -

var $html = $('<div class="chat self" style="justify-content: flex-end;">' +
                '<p class="chat-message" style="cursor: pointer;">' +
                       'message' +
                '</p>' +
              '</div>'
            );
 $html.find('p').click(() => cast_vote(url, option_position, vote_count));

La fonction de clic est appelée à chaque fois que l'on clique sur l'élément. Comment faire en sorte que l'élément ne soit cliqué qu'une seule fois?

javascript jquery

0 commentaires

3 Réponses :

0
votes

vous pouvez ajouter une classe comme "disabled" à l'élément en cliquant, puis vérifier si l'élément possède cette balise avant d'exécuter à nouveau la fonction cast_vote.

0 commentaires

0
votes

Vous pouvez ajouter une classe à l'élément après avoir cliqué dessus, et vérifier à chaque fois qu'un des éléments est cliqué pour voir s'il a cette classe.

L'exemple ci-dessous vous montre comment faire cela. p >

Démo

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message_box">
  <div class="message user1">
    Hello
  </div>
  <div class="message user2">
    Hi!
  </div>
  <div class="message user1">
    How are you?
  </div>
  <div class="message user2">
    Good thanks
  </div>
  <div class="message user2">
    and you?
  </div>

</div>

.message {
  padding: 4px;
  border: 1px solid grey;
  border-radius: 4px;
  width: auto;
  clear: both;
  margin: 4px;
}

.clicked {
  border-left-color: blue;
}

.user1 {
  float: left;
}

.user2 {
  float: right;
}

// Add click event to wrapping .message_box
$(".message_box").on("click", ".message", function() {

  // Check if the clicked message has the clicked class
  // If it doesnt, run script
  if (!$(this).hasClass("clicked")) {

    // Add clicked class to message
    // This means no further click events will run the code below
    $(this).addClass("clicked");
    console.log("Clicked");

  }

});

0 commentaires

3
votes

Utilisez le gestionnaire one () de jQuery. Selon l'API, "La méthode .one () est identique à .on () , sauf que le gestionnaire d'un élément et d'un type d'événement donnés est détaché après son premier invocation. "

Vous utilisez click () qui est un raccourci pour .on ("clic", gestionnaire) . Remplacez votre code par:

$html.find('p').one('click', () => cast_vote(url, option_position, vote_count));

0 commentaires