Comment empêcher une fonction d'être exécutée plus d'une fois sur un événement jquery .live

Question

Ok, je suis en train de rééditer mon message car je pense que cela pourrait être plus clair.

J'ai une page ASP.net avec un gridview etc. Sur les lignes de résultat de la vue quadrillée est une image qui, une fois cliquée, ouvre une fenêtre contextuelle modale (essentiellement une div masquée qui est affichée sur clic). Ce modal, tel qu'il apparaît est rempli dynamiquement par un ajax/json avec un tableau à 2 colonnes, la colonne 1 seulement les lignes de texte, la colonne 2 combinaison de listes déroulantes vides et les cases à cocher (tous ces éléments sont ajoutés au DOM AFTER le chargement de la page principale). J'essaie de remplir les listes de contrôle avec leur disponible via ajax/json quand ils sont cliqués par l'utilisateur, et je veux seulement que cela se produise sur le premier clic seulement et peu importe combien de fois l'utilisateur clique sur cette liste déroulante là après (même après être sorti de foyer et de retour) je ne veux pas voir plus de reprises de la même apparence.

Voici le code qui fonctionne actuellement lorsque vous cliquez sur la liste déroulante, c'est-à-dire que la liste déroulante est remplie. problème Te est si je lâche focus et puis re-cliquez sur le menu déroulant, il se repeuple une liste double de:

<code> 
    $('#FSSiteName').live('focus', function() { 
     var $this = $(this); 
     getFSSites(); 
     //i thought the below line would stop it happening again when i click on the dropdown 
    $this.unbind('focus'); 
}); 

function getFSSites() { 
      var ddSites = $("#FSSiteName"); 
      $.ajax({ 
       type: "POST", 
       url: "Circuits_OrderManagementTracker.aspx/getTheSitesList", 
       data: "{}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (response) { 
        var xmlDoc = $.parseXML(response.d); 
        var xml = $(xmlDoc); 
        var FSSitesReturned = xml.find("Table"); 

        $.each(FSSitesReturned, function (index, FSSitesReturned) { 
         dbname = $(this).find("SiteNames").text() 
         ddSites.append('<option>' + dbname + '</option>'); 
        }); 
       }, 
       failure: function (msg) { 
        alert(msg); 
       } 
      }); 
     } 
</code> 

J'ai changé au code ci-dessous des suggestions par vos bons mêmes, mais quand je fais la ci-dessous ma liste déroulante n'est plus peuplée et j'ai aussi essayé .one() qui annonce le même effet.

<code> 
     $('#FSSiteName').on('click', function() { 
      var $this = $(this); 
      //run your alert here if it´s necessary 
      //alert('Focused for the first time :)'); 
      getFSSites(); 
      //unbind the event to prevent it from being triggered again 
      $this.off('click'); 
     }); 
</code> 

Espérons que cela soit un peu plus clair pour tous ceux qui souhaitent aider.

Answer 1

Le contraire de live() est die() mais both are deprecated, vous devez utiliser à la place on() et off.

Answer 2

D'accord avec le commentaire de Varnie pour utiliser .one au lieu de .live(). Live() est destiné à être utilisé avec des éléments ajoutés dynamiquement au DOM; les éléments qui n'existent pas lorsque la page est chargée pour la première fois dans le navigateur. Puisque votre élément a un sélecteur d'identifiant, pas un sélecteur de classe, je suppose que vous n'avez pas besoin d'utiliser .live() /. On() du tout.

Answer 3

C'est simple d'utiliser on et off.

sur() -> ajouter un gestionnaire d'Evend off() -> supprimer un gestionnaire d'événements

$("#item li").on('click', function() { 
    $(this).text('ITEM CLICKED') 
    alert('CLICKED'); 

    //remove the event 
    $(this).off("click") 
}); 

voir cet exemple: http://jsfiddle.net/jMxxa/

documentation Jquery pour et désactiver:

sur:http://api.jquery.com/on/ off:http://api.jquery.com/off/

Answer 4

Salut à tous merci pour votre aide, ce qui est vraiment l'un des meilleurs sites que je l'ai appris à connaître comme un apprenant.J'ai moi-même mis en place une solution qui semble faire l'affaire, mais étant si nouveau pour le codage, j'apprécierais la rétroaction si j'ai fait quelque chose qui n'est pas idéal et qu'il existe une solution plus simple.

i re édité mon OP pour être plus clair voir ci-dessus et qui se tient encore, mais je l'ai changé une partie de mon code pour vérifier simplement si le menu déroulant était vide et il fonctionne voir ok:

<code> 
     $('#FSSiteName').live('click', function() { 
      var $this = $(this); 
      //Check if the dropdown has any options and if no add some 
      if ($this.find('option').length <= 1) { 
       getFSSites(); 
      } 
      else { 
       //Do Nothing!! 
      }    
     }); 

</code>