jQuery中.prop()可识别字符串存储的ID，.text()无法识别的原因

你遇到的不是jQuery存在两种行为，本质是第一种场景下不带#的$(variantId)从来就没生效过，你观察到的"生效"是视觉错觉，核心规则和原因如下：

• 首先明确jQuery选择器的基本逻辑：给$()传入字符串参数时，必须严格遵循CSS选择器语法：要通过ID匹配元素，必须给ID值加#前缀，比如$('#description123')才能正确选中id="description123"的元素。如果只传入纯ID字符串（比如description123），jQuery会把它当成标签名选择器，去查找页面上所有<description123>的自定义标签——你的页面里根本不存在这类标签，所以任何场景下，不带#的$(variantId)返回的永远是空jQuery对象。
• 你误以为click回调里的代码生效，完全是巧合：你点击的<td>内部本来就有一个自带contenteditable属性的<span>元素，点击td区域时焦点会自动落到这个可编辑span上，你自然可以直接输入内容，这个效果和你写的$(variantId).prop('contenteditable', true)没有任何关系。再加上空jQuery对象调用所有方法都不会抛错，只会静默失败，你当时没察觉这行代码根本没修改任何属性，误以为它正常工作了。
• 到input事件的场景，问题就直接暴露了：这时候你需要真实选中对应的td元素，再查找内部的span拿文本值。不带#的选择器拿到空对象，对空对象调用.find()当然找不到目标span，取.text()自然返回空字符串。等你拼接上#前缀，$('#' + variantId)才真正按照ID匹配到了目标td，才能正常查找内部元素拿到值。

你完全没必要存ID再二次查找元素，click触发时直接缓存当前元素的jQuery对象即可，既避免选择器写错的问题，性能也更好：

let $currentTd;
$(document)
  .on('click', ".tbl-itemClass", function () {
    $currentTd = $(this);
    $currentTd.prop('contenteditable', true);
  })
  .on('input', function () {
    if (!$currentTd) return;
    let newItemName = $currentTd.find('span.item-description').text();
    // 后续业务逻辑
  });

内容的提问来源于stack exchange，提问作者M Wel