Almacené un Id de a en una variable, variantId = $(this).prop('id') y noté 2 comportamientos diferentes de Jquery: cuando cambié el prop de <td> - jquery reconoció el elemento almacenado en la variable aunque se almacenó como una cadena ,
let variantId; $(document).on('click', ".tbl-itemClass", function () { variantId = $(this).prop('id'); $(variantId).prop('contenteditable', true);//changed the prop }). pero cuando intenté obtener el valor de <span> anidado en <td> , usando .text() , jquery solo reconoció el elemento almacenado en la variable cuando se agregó '#'
on('input', function () { let newItemName = $('#' + variantId).find('span.item-description').text(); //let newItemName = $(variantId).find('span.item-description').text(); //this line returned an empty string instead of the <span>s value. })este es el codigo completo:
let variantId; $(document).on('click', ".tbl-itemClass", function () { variantId = $(this).prop('id'); $(variantId).prop('contenteditable', true); }). on('input', function () { let newItemName = $('#' + variantId).find('span.item-description').text(); //let newItemName = $(variantId).find('span.item-description').text(); });Este es mi .csHtml (no creas que hace la diferencia, estoy usando la página de afeitar, Asp.Net)
<tbody> @foreach (var item in Model) { <tr currentitemid=" @item.Id"> <td class="tbl-itemClass desc" id="@("description"+ item.Id)" varianttype="@ViewBag.VariantType" > <span class="spnSpc"> </span> <span style="width:90%; padding:1px 5px 1px 2px;" **class="item-description"** contenteditable> @item.Description </span> </td> <td class="tbl-itemClass ">//more code here </td> </tr> }¿Puedes explicar la diferencia por favor? ¡Gracias!
En jQuery, si desea seleccionar un atributo por ID, debe poner:
$('#yourId')...A medida que obtiene el variantId almacenado y utilizado como identificación, para acceder a los elementos .text () necesita # como selector de identificación.
La respuesta a esta pregunta es que esta línea
$(variantId).prop('contenteditable', true);//changed the prop NO funcionó, y la razón por la que puede equivocarse y pensar que funciona es porque tiene el atributo contenteditable en el elemento html.