jquery - 为什么这个 css 选择器不能使用很棒的字体

Question

当我尝试在元素上应用 jquery 事件或 css 样式时，它不起作用，相反，如果使用像 id="delCoord"这样的静态事件并更改 css/jquery 甚至监听器，它就起作用了。谁能解释一下原因

注意我使用 fontawsome free 5.6.3。 谢谢

$('body').on('click', 'span[id^="edit-delCoordSet"]', function() {
  alert('YOU SHOULD SEE ME !!!!!');
  return false; // i just set this up for tests !!!
  var coordsValueIdx = $(this).parent('.editCoords').attr('data-elNumber');
  console.log('try to delete: ' + $(this).attr('id'));
  jqEl = $(this);
  console.log('html element ' + jqEl);
  updateCaveCoords(coordsValueIdx, '', '', jqEl, add = false, del = true, modify = false)
});

span[id^="edit-delCoordSet"] {
  padding: 0.3em 1em 0.3em 1em;
}

span[id^="edit-delCoordSet"]:hover {
  background-color: grey;
}

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="editCoords" data-elnumber="0">
  X:<input type="text" class="coords" data-elnumber="0" value="4.8552"> Y:
  <input type="text" class="coords" data-elnumber="1" value="43.32000"> Z:
  <input type="text" class="coords" data-elnumber="2" value="475"> &nbsp;
  <span class="fas fa-trash-alt fa-lg" id="edit-delCoordSet-0"></span>
</div>

<div class="editCoords" data-elnumber="1">
  X:<input type="text" class="coords" data-elnumber="0" value="4.8552"> Y:
  <input type="text" class="coords" data-elnumber="1" value="43.32000"> Z:
  <input type="text" class="coords" data-elnumber="2" value="475"> &nbsp;
  <span class="fas fa-trash-alt fa-lg" id="edit-delCoordSet-1"></span>
</div>

Answer 1

好的，我找到了罪魁祸首! 我正在使用 fontawsome jquery 扩展。所以我的被标签替换了(当然具有相同的 ID 和设置)。

我用这个选项改变了 fontawsome 加载: 数据自动替换-svg="嵌套"

那里有更多信息 https://fontawesome.com/how-to-use/on-the-web/using-with/jquery