La mise en œuvre de jQuery “live” classeur avec Javascript natif

Je suis à essayer de comprendre comment lier un événement à créer dynamiquement des éléments. J'ai besoin de l'événement à persister sur l'élément même après, il est détruit et régénérée.

Évidemment avec jQuery live fonction de ses facile, mais quelles seraient-elles mises en œuvre avec Javascript natif?

Vous pouvez toujours lire le jQuery source :p. Pas sûr dans quelle mesure il serait originaire des JS cependant, puisque je suis sûr que ce sera assez dépendent d'elle-même par ce point (en termes d'utilisation des sélecteurs et autres joyeusetés).
Juste une remarque: .live() est obsolète pour un long, long temps. Il a été remplacé par .delegate(), qui a été remplacé par .on(), veuillez utiliser le dernier. En outre, la dernière montre la différence entre la liaison et de délégation, de sorte que vous pouvez prendre un coup d'oeil. Le plus important est de vérifier pour la cible de l'événement.
Cette réponse de la mine peut aider stackoverflow.com/a/27373951/1385441

InformationsquelleAutor jjhenry | 2012-02-02

22

Voici un exemple simple:
```
function live(eventType, elementId, cb) {
    document.addEventListener(eventType, function (event) {
        if (event.target.id === elementId) {
            cb.call(event.target, event);
        }
    });
}

live("click", "test", function (event) {
    alert(this.id);
});
```
L'idée de base est que vous souhaitez associer un gestionnaire d'événement pour le document et de laisser le cas de la bulle jusqu'les DOM. Ensuite, vérifiez la event.target propriété pour voir si elle correspond aux critères souhaités (dans ce cas, il suffit que le id de l'élément).

Edit:

@shabunc découvert un assez gros problème avec ma solution, événements sur des éléments enfants de ne pas être détecté correctement. Une façon de résoudre ce problème est de regarder ancêtre éléments pour voir si certains ont spécifié id:
```
function live (eventType, elementId, cb) {
    document.addEventListener(eventType, function (event) {
        var el = event.target
            , found;

        while (el && !(found = el.id === elementId)) {
            el = el.parentElement;
        }

        if (found) {
            cb.call(el, event);
        }
    });
}
```
- Pour le document ou - de manière plus efficace - pour le récipient à l'extérieur de laquelle vous ne vous attendez pas des éléments de votre intérêt.
- C'est donc à l'écoute à n'importe quel cliquez sur l'événement et lors de l'événement click se produit, il vérifie si la cible de l'id correspond à l'id donné ou pas et de faire la fonction de rappel. Assez Intéressant 🙂
- La droite. Et comme @Tadeck points, vous pouvez limiter la formation de bulles à l'autre contenant l'élément d'une manière plus efficace à l'écoute.
- Cela ne fonctionnera pas avec les enfants des éléments du DOM, si on considère ce valide cliquez sur l'événement ainsi.
- Pouvez-vous développer? Peut-être me donner un exemple?
- bien sûr, pourquoi pas. Voici de quoi je parle - jsfiddle.net/9hN22
- Oui, vous avez absolument raison. Une façon de résoudre ce problème est de vérifier ancêtres et de voir si vous frappez celui qui correspond à l' id vous avez spécifié. Je vais mettre à jour ma réponse pour refléter cela.
- que faire si le sélecteur n'est pas id mais j'aime '.la valeur liquidative .active un"?
- Vous devez écrire quelque chose qui analyse cette sélection. Si vous avez à traiter avec des complexes de sélecteurs, vous pourriez être mieux à l'aide de jQuery ou un autre cadre.
InformationsquelleAutor Andrew Whitaker

En plus de Andrew post et Binyamin commentaire, c'est peut-être une option:

Avec cela, vous pouvez utiliser " nav .point a' tel que le sélecteur.
Basé sur Andrew code.

function live (eventType, elementQuerySelector, cb) {
    document.addEventListener(eventType, function (event) {

        var qs = document.querySelectorAll(elementQuerySelector);

        if (qs) {
            var el = event.target, index = -1;
            while (el && ((index = Array.prototype.indexOf.call(qs, el)) === -1)) {
                el = el.parentElement;
            }

            if (index > -1) {
                cb.call(el, event);
            }
        }
    });
}



live('click', 'nav .aap a', function(event) { console.log(event); alert('clicked'); });

Merci beaucoup. Une chose que je vous suggère est bien de soutien de la collectivité e.preventDefault() à l'intérieur de addEventListener. Si elle est utilisée, alors vous aurez besoin de la modifier pour document.querySelector(elementQuerySelector).addEventListener(eventType, function (event) { bien il va vous empêcher de vous en cliquant sur l'un des autres éléments sur la page

InformationsquelleAutor Ro NL

1

Une alternative à la liaison d'un événement de manière dynamique à un élément spécifique pourrait être un événement mondial de l'auditeur. Donc, chaque fois que vous mettez à jour le DOM avec un autre élément nouveau de l'événement sur cet élément aussi les "captures". Un exemple:

JS:
```
var mybuttonlist = document.getElementById('mybuttonlist');

mybuttonlist.addEventListener('click', e=>{
  if(e.target.nodeName == 'BUTTON'){
    switch(e.target.name){
      case 'createnewbutton':
        mybuttonlist.innerHTML += '<li><button name="createnewbutton">Create new button</button></li>';
        break;
    }
  }
}, false);
```
CSS:
```
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
```
HTML:
```
<ul id="mybuttonlist">
  <li><button name="createnewbutton">Create new button</button></li>
</ul>
```
Dans cet exemple j'ai un écouteur d'événement sur le <ul> pour cliquez sur événements. Ainsi, un événement se produit pour tous les éléments enfants. De la simple gestionnaire d'événement que j'ai créé, vous pouvez voir qu'il est facile d'ajouter plus de logique, plus de boutons (avec différentes ou de répéter les noms), ancres, etc.

De tous dans le, vous pourriez ajouter un eventlistener de document au lieu de l'élément de la liste, la capture de tous les événements de clic sur la page, puis cliquez sur gérer les événements dans le gestionnaire d'événements.

InformationsquelleAutor chrwahl
1

Les autres solutions sont un peu trop compliqué...
```
document.addEventListener('click', e => {
   if (e.target.closest('.element')) {
       //.element has been clicked
   }
}
```
Il y a un polyfill dans le cas où vous avez besoin pour prendre en charge Internet Explorer ou les vieux navigateurs.

InformationsquelleAutor Fabian von Ellerts

Vous devez vous connecter pour publier un commentaire.