jQuery: Encadenamiento de() cuando haciendo uso de la delegación

En los viejos tiempos, los he utilizado para la cadena de llamadas a live() con gran éxito, por ejemplo:

$(".something")
    .live("click", function(e) { ... })
    .live("change", function(e) { ... })
    .live("submit", function(e) { ... });

Estos días, live(), bind() y delegate() han sido reemplazadas por la nueva y brillante on().

He tratado de una simple sustitución de live() con on() que parece obvio:

$(".something")
    .on("click", function(e) { ... })
    .on("change", function(e) { ... })
    .on("submit", function(e) { ... });

Sin embargo, es casi obvio que esto no funciona cuando usted considere cómo on() obras. Esto de http://api.jquery.com/on/:

«Los controladores de eventos son sometidos sólo a la actualidad, los elementos seleccionados; deben existir en la página en el momento en que el código que hace la llamada .en().»

De acuerdo con el jQuery docs, necesito enlazar a document y delegado de .something para manejar los eventos en vivo. Desafortunadamente, esto significa que al final me repite mi delegado selector (.document) si quiero repetir lo que tengo encima con on():

$(document)
    .on("click", ".something", function(e) { ... })
    .on("change", ".something", function(e) { ... })
    .on("submit", ".something", function(e) { ... });

Esto funciona como se espera, pero realmente me encantaría ser capaz de cadena más claramente como yo lo hago usando live(). Me estoy perdiendo algo?

  • Creo DELEGADO sustituye a VIVIR y es sólo una «máscara» para el normal de los eventos.
  • Desde el jQuery docs: «Como de jQuery 1.7, el .en() método proporciona toda la funcionalidad necesaria para la fijación de los controladores de eventos.» por lo que realmente se está haciendo en vivo(), bind() y delegado() redundante.
  • ¿Por qué el downvote? esto parece una buena pregunta para mí.
  • Lo que está mal con el click(), change() y submit()-funciones privided por el jQuery API?
  • ellos no son «en vivo»
  • mi pregunta es que hacer con los eventos en vivo, por ejemplo, para elementos cargados a través de AJAX.
  • Lo que yo veo. Ni siquiera sabía que jquery tenía estas características :S

InformationsquelleAutor tristanm | 2012-08-08

3 Kommentare

  1. 78

    Yo creo que se puede hacer esto:

    $(document).on({
        "click" : function(e) { ... },
        "change" : function(e) { ... },
        "submit" : function(e) { ... }
    }, ".something");

    Que es, el uso de los eventos de «mapa» de la sintaxis para especificar los eventos y sus controladores, y, a continuación, especifique el selector utilizar para el delegado-estilo de comportamiento.

    • Sí, usted señor es el ganador. github.com/jquery/jquery/blob/1.7.2/src/event.js#L891
    • gracias por ser verdaderamente útil stackoverflow miembro por leer mi pregunta y dar una respuesta correcta 🙂
    • Alguien que realmente lea la pregunta bien antes de contestar. Un premio está en orden!
  2. 0

    Como entiendo tu pregunta quieres algo tan corto como live(). El uso de on() tienes que escribir un poco más, pero si .something se añade dinámicamente, a continuación, usted tiene otra opción que también los delegados al evento.

    var $div = $('<div/>', {
      'class': 'something',
       click: function () { ... },
       change: function () { ... }
    })
    
    //Already has events attached
    //no need to delegate
    $div.appendTo('body')
    • «…que también los delegados al evento» – no creo que delegar, es sólo la unión de los eventos directamente en el momento en el que el elemento(s) se crean.
    • Sí, supongo que tienes razón, en cualquier caso, es otra forma de hacer lo mismo en determinadas situaciones.
  3. 0

    .live() tiene un montón de problemas. Uno de ellos era que se estaba evaluando el selector de ".something" al ejecutar el código, pero no usando el resultado (por ejemplo, inútil) y, a continuación, volver a evaluar en tiempo de ejecución cuando se produjo el evento (como la que necesita para funcionar correctamente).

    Además .live() obligó a todos los eventos dinámicos para estar en el document objeto de que en realidad podría retardar la gestión de eventos de abajo si usted tenía un montón de la dinámica de los controladores de eventos. .on(), por otro lado, permite seleccionar una estática padre que está mucho más cerca del objeto real y conecte el controlador de eventos para el objeto para diferentes dinámicas de los controladores de eventos puede ser conectado tanto más cerca de la fuente y a los diferentes objetos que hace que su rendimiento en tiempo de ejecución mucho, mucho mejor cuando hay un montón de controladores de eventos.

    Así, simplemente por la necesidad de vivir con el nuevo camino que .on() obras, ya que es mucho más eficiente. No debería ser un gran problema para usted que usted tiene que hacer una ligera más en volver a escribir de la dinámica del selector si se utiliza el mismo formulario que usted está tomando actualmente o, usted puede pasar un mapa como el primer parámetro a .on() y manejar múltiples eventos en un .on() llamadas. Ver la segunda forma de .on() en el jQuery doc para .on() para obtener más información.

    Aquí un explicación sencilla de uso de .on() de comportamiento dinámico.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea