La méthode jQuery .on () ne voit pas de nouveaux éléments

Question

J'obtiens un élément JSON et je crée une liste à partir de ses éléments comme ceci:

 getTitles: function(data) {
    data = data || {};
    var list = [];

    $.getJSON(
        '/titles',
        data,
        function(data) {
            $.each(data.data, function(key, val) {
                list.push(
                    '<li><a href="'+ val.href +'">'+ val.title +'</a><span class="count">'+ val.count +'</span></li>'
                )
            });

            $('#title-items').html(list.join(''));
        }
    );
}
 

Et je lie un événement de clic pour a éléments comme ceci:

 $('a').on('click', function(e) {
    alert('clicked');
    e.preventDefault();
});
 

Les anciens éléments a sont alertes, mais les nouveaux suivent l'URL. Le gestionnaire d'événements ne fonctionne pas pour les nouveaux. Comment puis-je résoudre ça?

Answer 1

Vous n'êtes pas en utilisant le code correct pour obtenir en direct de la fonctionnalité.

$('#title-items').on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});

1. Tout d'abord, sélectionnez votre élément ancêtre commun (#title-items dans cet exemple). Vous pouvez utiliser document ici aussi, si vous souhaitez gérer tous a - éléments.
2. Passer le type d'événement (on), puis le sous sélecteur (a), puis la fonction de rappel pour l'événement.

Maintenant, quand click des événements de la bulle jusqu'à #title-items, il va vérifier pour voir si l'élément est un a élément, et, dans l'affirmative, le feu de la fonction de rappel.

Answer 2

Vous souhaitez utiliser l'événement de la délégation de la capture des événements déclenchés sur des événements qui sont présents dans les DOM, à tout point dans le temps:

$(<root element>).on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});

Mise à JOUR - Dans cet exemple, l' <root element> , est l'ancêtre des liens qui vous lient qui est présent dans le DOM au moment de la liaison.

L'idée de base est que, puisque nous ne pouvons pas associer un gestionnaire d'événement à un élément du DOM ne sont pas encore dans les DOM, nous attachons le gestionnaire d'événement à un élément ancêtre et attendre l'événement de remonter jusqu'à l'ancêtre de l'élément. Une fois l'événement atteint l'ancêtre de l'événement l' event.target de la propriété est vérifiée pour voir ce qui était à l'origine cliqué sur l'élément.