Pregunta

... al menos para mí. Este código usó trabajar bien. Estoy bastante seguro de que nada ha cambiado, pero ahora de repente se comporta extrañamente. Básicamente estoy tratando de crear una funcionalidad de edición en línea. Cuando el usuario hace clic en el enlace, genera dinámicamente un cuadro de texto y un enlace de confirmación y cancelación. Tengo problemas con el enlace de cancelación, no eliminar todo en la celda.

HTML:

...
<td class="bid">
   <a href="javascript:" class="102093" title="Click to modify bid">$0.45</a>
</td>
...

JQuery vinculante (en $(function())):

$('.bid a').live('click', renderBidChange);
....
$('.report_table .cancel').live('click', cancelUpdate); 

renderBidChange (Esta función crea los elementos dinámicos):

function renderBidChange(){
    var cpc = $(this);
    var value = cpc.text().replace('$', '');
    var cell = cpc.parent('.bid');
    cpc.hide();

    var input = document.createElement('input');
    $(input).attr({type:'text',class:'dynamic cpc-input'}).val(value);
    cell.append(input);

    var accept = document.createElement('a');
    $(accept).addClass('accept').attr({'href':'javascript:',
      'title':'Accept Changes'}).text('Accept Changes');
    cell.append(accept);

    var cancel = document.createElement('a');
    $(cancel).addClass('cancel').attr({'href':'javascript:',
      'title':'Cancel Changes'}).text('Cancel Changes');
    cell.append(cancel);

    $(input).focus();
    input.select();
}

cancelUpdate Esta función simplemente elimina todo lo visible (toda la basura dinámica en este caso) en la celda y muestra lo que solía estar allí.

function cancelUpdate(){
    var cell = $(this).parent();
    cell.find(':visible').remove();
    cell.find(':hidden').show();
}

Sin embargo, por alguna razón, ¡el enlace de cancelación permanece después de hacer clic! Todo lo demás se elimina excepto eso. WTF

¡Gracias por cualquier idea que pueda proporcionar! Estoy seguro de que es solo un pequeño detalle estúpido que he terminado [con cafeíno] mirando ...

ACTUALIZAR Inmediatamente después de publicar esto, epifané que puede ser un problema de CSS, pero después de verificar mi código, no lo es.

¿Fue útil?

Solución

Necesitas un ligero ajuste aquí:

$('.bid a:not(.cancel)').live('click', renderBidChange);

Desde que te mudaste a .live(), la primera función también se ejecuta con un clic en Cancelar :)

Otros consejos

¿Qué pasa si cambias?

$('.report_table .cancel').live('click', cancelUpdate); 

a

$('.bid .cancel').live('click', cancelUpdate); 

No espero una solución, pero solo estoy duplicando

¿Cuál es la función "en vivo" para .accept? ¿Funciona (presumiblemente así)?

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top