jQuery .on ('click') vs .click () et .delegate ('click')

Je suis habitué à l'utilisation de .click() et delegate('click')donc quand j'ai lu les deux ont été désapprouvées dans les dernières versions de jQuery, j'ai pensé que j'avais lu sur elle, mais je suis de me gratter la tête un peu.

La documentation ici semble suggérer que c'est une baisse-dans le remplacement pour .live() et .délégué()mais .cliquez sur() et .bind() ont un comportement différent, à savoir la liaison à actuellement les objets existants, où les autres personnes liées à des objets qui correspondent au sélecteur de modèle à travers la durée de vie de la DOM.

Dans la plupart des cas, cela ne ferait pas une grande différence, mais lorsque vous ajoutez des éléments à votre DOM de manière dynamique, c'est une distinction importante. Les nouveaux objets correspondant à l'ancien modèle pas ont les auditeurs liée à la click événement à l'aide de .click()mais serait avec .delegate().

Ma question est, comment fait-on utiliser le .on() méthode de reproduire le comportement de ces deux pré-existantes .delegate() et .bind()? Ou le est tout dans l'avenir va vers la .delegate() style?

source d'informationauteur Jeremy Holovacs

  1. 33

    Les deux modes sont toujours pris en charge.

    L'appel suivant à bind():

    $(".foo").bind("click", function() {
    //...
});

    Peut être directement converti en l'appel suivant à on():

    $(".foo").on("click", function() {
    //...
});

    Et l'appel suivant à delegate():

    $("#ancestor").delegate(".foo", "click", function() {
    //...
});

    Peuvent être convertis dans l'appel suivant à on():

    $("#ancestor").on("click", ".foo", function() {
    //...
});

    Pour l'exhaustivité, l'appel suivant à live():

    $(".foo").live("click", function() {
    //...
});

    Peuvent être convertis dans l'appel suivant à on():

    $(document).on("click", ".foo", function() {
    //...
});
  2. 4

    La on méthode peut remplacer les deux bind et delegate en fonction de comment il est utilisé (et aussi click comme bind pouvez remplacer ce):

    .click(handler) == .on('click', handler)

.bind('click', handler) ==  .on('click', handler)

.delegate('click', '#id', handler) == .on('click', '#id', handler)

    Ni le clickdelegate ou bind méthodes ont fait à la obsolète page encore. Je doute que les click méthode ne le sera jamais.

  3. 2

    Vous pouvez déduire de l'utilisation de l'alias à partir du code source.

    console.log($.fn.delegate);
function (a, b, c, d) {
    return this.on(b, a, c, d);
}

console.log($.fn.bind);
function (a, b, c) {
    return this.on(a, null, b, c);
}

    La la documentation fournit également des exemples d'utilisation:

    $(elements).delegate(selector, events, data, handler);  //jQuery 1.4.3+
$(elements).on(events, selector, data, handler);        //jQuery 1.7+
  4. 1

    .délégué() et .bind() utilise on méthode. Et .click() est un raccourci pour .on() trop.