Hacer clic en el evento más de una vez, pero desvincularlo después de cada clic

Qué quiero hacer: cada vez que hago clic en una fila de la tabla, entra en modo de edición. Cuando hago clic en otra fila, la fila en la que hice clic anteriormente sale del modo de edición y la que acabo de hacer clic pasa al modo de edición.

El siguiente código está en un archivo JavaScript incluido. Tengo una función que hace que las filas de la tabla sean editables.

function editRow(row) {
    /* awesome code here */
}

y ten los eventos listos ...

$(".editable_title").click(function() {
    editRow(this.parentNode);
});`

Lo que he intentado:

  1. Pon el código en el medio $(document).ready(function() { }); pero solo funciona con el primer clic y el primer envío de edición. Pero luego, si intento hacerlo de nuevo, simplemente no funciona.

  2. Simplemente coloque el código por sí mismo en el archivo incluido sin el $(document).ready(function(){ });. Entonces usa onclick eventos en los tr. Problema:

    1. El JavaScript es intrusivo.
    2. Si hago clic en la misma fila más de una vez, sigue activando el evento varias veces; y si hago clic en diferentes filas, todas entran en modo de edición al mismo tiempo.

Sé que es solo una cuestión de tener un oyente de eventos constante y usar unbind. Intenté usar .live() que funcionó bien pero luego no pude conseguir .die() trabajar.

¿Me pueden dar algunas sugerencias?

preguntado el 28 de agosto de 11 a las 00:08

Mira esto. Esto es lo que busca. stackoverflow.com/questions/6752025/… -

Gracias @ShankarSangoli pero lo intenté .one pero luego, ¿qué pasa después de enviar el botón Actualizar? No puedo editar más filas. -

Puedes llamar de nuevo one y conecte el manipulador. -

¿Cómo puedo hacer eso? ¿Quiere decir que trato de llamarlo nuevamente haciendo clic en la fila nuevamente? Solo funciona una vez. -

¿Ha pensado en agregar una función que salga del modo de edición, que se llama como la primera cosa en $(".editable_title").click(). -

2 Respuestas

Podrías usar one en lugar de click:

$('.editable_title').one('click', function() { editRow(this.parentNode); });

Y a continuación, utilizar one de nuevo solo en el .editable_title para la fila que editó cuando haya terminado de editar.

O podrías usar una bandera:

$('.editable_title').click(function() {
    var $p = $(this).parent();
    if($p.data('editing'))
        return;
    $p.data('editing', true);
    editRow($p[0]);
});

Y luego haz un $x.removeData('editing'), para el apropiado $x, cuando haya terminado de editar.

Respondido 28 ago 11, 05:08

Gracias @mu, pero ¿cómo puedo usarlo? .one ¿mas de una vez? - leonel

@leonel: Tendrías que volver a llamarlo (pero solo para el single .editable_title que le interese) cuando haya terminado de editar. - mu es demasiado corto

¿Cómo puedo volver a llamarlo? No entiendo. Probablemente pueda hacer un onclick() evento en el enlace, pero eso sería intrusivo javascript. ¿O crees que ese es el camino a seguir? - leonel

@leonel: Llamarías $(x).one('click', function() { editRow(this.parentNode); }); en el apropiado x, Probablemente $(e).closest('tr').find('.editable_title').one(... dónde e es la cosa pasada a editRow. - mu es demasiado corto

Yo iría con la solución de bandera. - Fantasma de Madara

Prueba esta

$(".editable_title").one(function() {
    editRow(this);
});

function editRow(row) {
    var rowNode = row.parentNode;
    /* awesome code here */


    //Attach the click event here again after editing is done
    //If you are doing any ajax calls then this should be done in the success callback
    $(row).one(function() {
       editRow(this);
    });
}

Respondido 28 ago 11, 09:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.