Fonction JQuery exécutée plusieurs fois pour chaque élément

Question

J'ai un simple script qui génère un élément div toutes les secondes en utilisant setInterval. Le problème auquel je suis confronté est que le addScore() se déclenche une fois pour chaque élément de la fenêtre. Ainsi, s'il y a quatre cibles spawnées, la fonction addScore() s'exécute quatre fois.

<div class="wrap">
    <div class="intro">
        <p>Simply press go and click the circles as fast as you can!</p>
        <button class="go" type="button">Go!</button>
    </div>  
</div>
<script type="text/javascript">

    var score = 0; // Starting score for game

    function addScore(){
        score++;
        console.log(score);
    }

    function spawnTargets() {
        $(".wrap").append("<div class='target'>Hello</div>");
        $(".target").click(function(){
            $(this).hide();
            addScore();
        });
    }

    $(".go").click(function() {
      $(".intro").toggle();
        setInterval(spawnTargets, 1000);
    });

</script>

Answer 1

Lorsque vous ajoutez le click-event au .target, vous le faites avec tous les divs que vous avez précédemment ajoutés ! Utilisez plutôt ceci :

<script type="text/javascript">

    var score = 0; // Starting score for game

    function addScore(){
        score++;
        console.log(score);
    }

    function spawnTargets() {
        $(".wrap").append("<div class='target'>Hello</div>");
    }

    $(".go").click(function() {
      $(".intro").toggle();
        setInterval(spawnTargets, 1000);
    });

    $(".wrap").on('click', '.target', function(){
        $(this).hide();
        addScore();
    });

</script>

La fonction .on ajoute le gestionnaire d'événement à l'élément parent et filtre les éléments de clic qui proviennent de .target.

Answer 2

Vous êtes lier plusieurs événements de clic lorsqu'un appel à la fonction est effectué.

function spawnTargets() {
        $(".wrap").append("<div class='target'>Hello</div>");
        $(".target").click(function(){
            $(this).hide();
            addScore();
        });
    }

Au lieu de cela, vous devez déléguer l'événement

Changement

$(".target").click(function(){

à

$('.wrap').on("click", ".target", function(){

Et le déplacer en dehors de la fonction

Code

var score = 0; // Starting score for game

function addScore() {
    score++;
    console.log(score);
}

function spawnTargets() {
    $(".wrap").append("<div class='target'>Hello</div>");
}

$('.wrap').on("click", ".target", function () {
    $(this).hide();
    addScore();
});

$(".go").click(function () {
    $(".intro").toggle();
    setInterval(spawnTargets, 1000);
});