Uncaught TypeError：无法在字符串'#partnercode'上创建属性'guid'问题排查

错误根源排查 #

• 事件绑定参数不匹配：你的hookEvent方法大概率要求第二个参数传入DOM元素或jQuery对象，而非字符串选择器#partnercode。直接传字符串会导致内部逻辑把字符串当成DOM对象操作，从而抛出无法给字符串添加guid属性的错误。
• 回调函数语法错误：partnercode_selected里存在两处语法问题：
  • $(this.val())错误：事件回调中this是当前DOM元素，val()是jQuery方法，需改为$(this).val()
  • $('.partnerSelected'.css('display', 'none'))错误：调用css方法的位置错误，需改为$('.partnerSelected').css('display', 'none')
• HTML属性错误：select的class属性多了前缀点，.partnercode应改为partnercode，否则无法正确选中该类元素。
• 空option逻辑不匹配：默认空option未设置value="0"，导致判断selectedOption ==0无法匹配该选项。

修复后的代码 #

修正后的JS代码 #

methods: {
  init: function() {
    this.hookEvents();
  },

  hookEvents: function() {
    // 将字符串选择器转为jQuery对象传入hookEvent
    this.hookEvent("change", $("#partnercode"), CceModule.Org.EditCRQuestions.partnercode_selected);
  },
},
partnercode_selected: function() {
  // 修正val()调用方式
  var selectedOption = $(this).val();
  // 修正css方法调用语法，同时兼容空选项
  if (selectedOption == 0 || selectedOption === "") {
    $('.partnerSelected').css('display', 'none');
  } else {
    $('.partnerSelected').css('display', 'block');
  }
},

修正后的HTML/PHP代码 #

<label>Partner Code</label>
<select style="width: max-content" name="partnercode" id="partnercode" class="partnercode" data-mandatory='true'>
  <!-- 给空option设置value="0"，匹配判断逻辑 -->
  <option value="0"></option>
  <?php
    foreach($this->partnerCodes as $aPartner){ ?>
  <option value="<?=$aPartner["partnerid"]; ?>"><?=$aPartner['partnerid']?></option>
  <?php } ?>
</select>

替代方案 #

如果hookEvent方法本身存在实现bug，可直接改用原生jQuery事件绑定：

hookEvents: function() {
  $("#partnercode").on("change", CceModule.Org.EditCRQuestions.partnercode_selected);
},

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