Cómo editar y actualizar valor al hacer doble clic en Jquery

Solución:

Aquí en tu caso necesitas .stopPropagation(): http://jsfiddle.net/jFycy/

$(function () {
    $("#div table td").dblclick(function (e) {
       e.stopPropagation();      //<-------stop the bubbling of the event here
       var currentEle = $(this);
       var value = $(this).html();
       updateVal(currentEle, value);
    });
});

function updateVal(currentEle, value) {
  $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
  $(".thVal").focus();
  $(".thVal").keyup(function (event) {
      if (event.keyCode == 13) {
          $(currentEle).html($(".thVal").val().trim());
      }
  });

  $(document).click(function () { // you can use $('html')
        $(currentEle).html($(".thVal").val().trim());
  });
}

En lugar de hacer clic en body hacer el evento en document o html que es el elemento principal de todos los demás elementos.

Se corrigió la última respuesta. Al verificar quién desencadenó el evento, puedo evitar el problema del doble clic en la entrada.

Además, con el .off (‘clic’) no tienes el problema de que cada td que actualizaste antes cambia con el último.

$(function () {
    $(".inner").dblclick(function (e) {
        if($(event.target).attr('class')!="thVal")
            {
                e.stopPropagation();
                var currentEle = $(this);
                var value = $(this).html();
                updateVal(currentEle, value);
        }
    });
});

function updateVal(currentEle, value) {
    $(document).off('click');
    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {

            $(currentEle).html($(".thVal").val());
        }
    });

    $(document).click(function () {

            if($(event.target).attr('class')!="thVal")
            {
                $(currentEle).html($(".thVal").val());
                $(document).off('click');
            }

    });

}

Sé que es un tema antiguo … pero la respuesta que se publicó aquí no funcionó bien debido al evento de clic en la entrada, tomé la respuesta y la modifiqué

$(".daily-signals > tbody > tr > td").dblclick(function (e) {
    e.stopPropagation();      //<-------stop the bubbling of the event here
    var currentEle = $(this);
    var value = $(this).html();
    console.log('fire!');
    updateVal(currentEle, value);
});

function updateVal(currentEle, value) {
    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
    var thVal = $(".thVal");
    thVal.focus();
    thVal.keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html(thVal.val());
            save(thVal.val());
        }
    });

    thVal.focusout(function () {
        $(currentEle).html(thVal.val().trim());
        return save(thVal.val()); // <---- Added missing semi-colon
    });

}

function save(value) {
    console.log(value);
}

la función de guardar hará la solicitud ajax

---

---

Utiliza Nuestro Buscador