Usando jQuery .vivir con alternancia de eventos

Mi código funciona, pero me exigía que hacer doble clic para active mi encadenamiento (una vez para el evento click, y de una vez por la alternancia del evento). ¿Qué puedo hacer para hacer de él, así que sólo tiene que hacer clic una vez para que la palanca se realizará automáticamente?

    //Show or Hide Comments
$('#showHideComments').live('click', function() {
    $('#showHideComments').toggle(function() {
        $(".commentsSwitch").animate({"marginLeft": "+=53px"}, 500);
        $("#comments").fadeIn(300);
        $("#addComment").fadeIn(300);
    },function(){
        $(".commentsSwitch").animate({"marginLeft": "-=53px"}, 500);
        $("#comments").fadeOut(300);
        $("#addComment").fadeOut(300);
    });
});

Gracias!

InformationsquelleAutor Dave Kiss | 2010-01-31

4 Kommentare

  1. 42

    Usted puede utilizar live y toggle juntos. Lo que puedes hacer, es simplemente hacer su propio «alternar» de todo tipo:

    $('#showHideComments').live('click', function() {
        if($("#addComment").is(':visible')){
          $(".commentsSwitch").animate({"marginLeft": "-=53px"}, 500);
          $("#comments, #addComment").fadeOut(300);
        } else {
          $(".commentsSwitch").animate({"marginLeft": "+=53px"}, 500);
          $("#comments, #addComment").fadeIn(300);
        };
    });

    live es vinculante para click, sin embargo, cuando toggle se llama, es también obligado (normalmente) en haga clic en. Usted debe decidir si ‘vivir’ es realmente lo que usted necesita. Por ejemplo, si #showHideComments objeto es reemplazado a través de AJAX durante el uso de la página, entonces usted tiene que vivir y mi solución. Sin embargo, si no lo cambié y sigue siendo el mismo, sólo tiene que utilizar el interior de su original live función (sólo la alternancia de código) y va a ser de oro.

    • Pssst, combinar los selectores demasiado!
    • Gracias! Justo lo que necesitaba. Que necesito para uso directo como los datos devueltos por mi script php a través de ajax. Gracias por la optimización demasiado, todavía estoy aprendiendo 🙂
    • puede que desee actualizar esto para la nueva era 🙂
  2. 4
    //Show or Hide Comments
    $('#showHideComments').live('click', function() {
        $('#showHideComments').toggle(function() {
            $(".commentsSwitch").animate({"marginLeft": "+=53px"}, 500);
            $("#comments").fadeIn(300);
            $("#addComment").fadeIn(300);
        },function(){
            $(".commentsSwitch").animate({"marginLeft": "-=53px"}, 500);
            $("#comments").fadeOut(300);
            $("#addComment").fadeOut(300);
        }).trigger('click');
    });

    Esto también funciona 🙂

  3. 2

    Mejor aún, utilice $(this) para alternar por lo que se refiere a los padres – esto va a funcionar mejor con varias instancias basadas en clases u objetos únicos contemplados por la IDENTIFICACIÓN al padre:

    $('#showHideComments').live('click', function() {
        $(this).toggle(function() {
            $(".commentsSwitch").animate({"marginLeft": "+=53px"}, 500);
            $("#comments").fadeIn(300);
            $("#addComment").fadeIn(300);
        },function(){
            $(".commentsSwitch").animate({"marginLeft": "-=53px"}, 500);
            $("#comments").fadeOut(300);
            $("#addComment").fadeOut(300);
        }).trigger('click');
    });
  4. 1

    live está en desuso. Uso on lugar
    Por ejemplo:

    $(document).on 'click', 'a[data-object="save-post"]', () ->
      alert 'Saving the post...'

Kommentieren Sie den Artikel

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

Pruebas en línea