web-dev-qa-db-fra.com

la méthode jQuery .on () ne voit pas les nouveaux éléments

Je reçois un élément JSON et construis 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 l'événement click pour les éléments a comme ceci:

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

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

javascriptjqueryjavascript-eventsevent-handlingclick
46
cnkt

Vous n'utilisez pas le code correct pour obtenir la fonctionnalité live .

$('#title-items').on('click', 'a', function(e) {
    alert('clicked');
    e.preventDefault();
});
  1. Commencez par sélectionner votre élément ancêtre commun (#title-items dans cet exemple). Vous pouvez aussi utiliser document si vous voulez gérer les éléments all a.
  2. Passez le type d'événement (on), puis le sous-sélecteur (a), puis la fonction de rappel de l'événement.

Désormais, lorsque les événements click atteindront #title-items, il vérifiera si l'élément est un élément a et, le cas échéant, déclenchera le rappel.

131
alex

Vous souhaitez utiliser la délégation d'événements pour capturer des événements déclenchés sur des événements présents dans le DOM à tout moment:

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

UPDATE- Dans cet exemple, le <root element> est un ancêtre des liens auxquels vous vous associez qui est présent dans le DOM au moment de la liaison.

L'idée de base est que, comme nous ne pouvons pas attacher de gestionnaire d'événement à un élément DOM qui ne se trouve pas encore dans le DOM, nous attachons le gestionnaire d'événement à un élément ancêtre et attendons que l'événement s'affiche dans l'élément ancêtre. Une fois que l'événement atteint l'événement ancêtre, la propriété event.target est vérifiée pour voir ce qui était l'élément à l'origine cliqué.

13
Jasper

Vous pouvez utiliser la bibliothèque arrive.js (elle utilise MutationObserver en interne).

document.arrive('a', function(){
    // 'this' refers to the newly created element
    var newElem = this;
});
0
Uzair Farooq