Briser les fonctions javascript

Question

J'ai un événement click

$('#ship_Move').click(function (event) {     
     event.stopPropagation(); 
     $('.shipActionsList').remove(); 
     moveShip(shpID); 
    }); 

qui appelle une fonction moveShip

function moveShip(shp_id) { 
    $('.fieldDivs').click(function() {  
     $("#hello").append("Move "+ shp_id + "to " + $(this).attr('id')+"<br/>"); 
    }); 
} 

Et le débogage est de donner les bons résultats - mais avec un problème. Si je cliquez d'abord sur l'élément #ship_Move 4 fois, puis sélectionnez une destination que je reçois (.fieldDivs) ceci:

Déplacer 162 à FD455

Déplacer 162 à FD455

Déplacer 162 à FD455

Déplacer 162 à FD455

Parce que la fonction moveShip a été appelé 4 fois, et chacun d'entre eux sont en attente d'un élément .fieldDivs à cliquer, et quand on clique dessus, tous les quatre d'entre eux append leurs résultats (162 est l'ID du navire que je veux m ove, FD455 est sa destination).

Ce que je besoin est quelque chose entre ces lignes:

function moveShip(shp_id) { 
    $('.fieldDivs').click(function() {  
     $("#hello").append("Move "+ shp_id + "to " + $(this).attr('id')+"<br/>"); 
     // IF A NEW #SHIP_MOVE IS CLICKED, END THIS FUNCTION AS IT WILL BE CALLED AGAIN 
    }); 
} 

Je sais que je peux retourner faux de briser les fonctions, mais pour un événement click je besoin d'une nouvelle fonction, alors return false serait juste mettre fin à l'événement click à l'intérieur de cet événement. Ce que je veux dire est - si vous échangez la ligne commentée ci-dessus // SI UN NOUVEAU NAVIRE avec le code suivant:

$('.ship_Move').click(function() {  
     // return false would break this function 
     }); 

Ce code ne se terminera cet événement de clic, mais pas la fonction moveShip.

J'espère que je me suis fait assez clair ... Merci!

Answer 1

Vous pouvez UNBIND gestionnaire existant d'événements click préalable:

$('.fieldDivs').off('click').click(function() { 
    // ... 
}); 

S'il y a d'autres gestionnaires d'événements click qui doivent être gardés, je suggère d'utiliser événements namespaced:

$('.fieldDivs').off('click.move').on('click.move', funciton() { 
    // ... 
}); 

---

Bien que, après y avoir réfléchi, au lieu de lier encore et encore les gestionnaires d'événements, vous pouviez j uste les lier une fois et de partager les données nécessaires via les variables:

$(function() { 
    var shpID = ...; // however this is set 

    $('#ship_Move').click(function (event) {     
     event.stopPropagation(); 
     $('.shipActionsList').remove(); 
     // set shpID here somehow? 
    }); 

    $('.fieldDivs').click(function() {  
     $("#hello").append("Move "+ shpID + "to " + $(this).attr('id')+"<br/>"); 
    }); 
}); 

Il ne semble pas que vous devez lier un nouveau gestionnaire d'événements seulement parce que shpID changements. Bien sûr, ceci est un exemple simplifié puisque je ne connais pas votre code, mais peut-être que ça aide.