javascript - 单击页面加载后添加的跨度元素

我有一个div。单击一个单词后，div会出现一些跨度。
编码：

<div id="show-data">
  <span>Erprobung</span>
  <span>Probe</span>
  <span>Prüfung</span>
  <span>Test</span>
</div>

我的问题：我也想单击新的跨度标签，但是它对我不起作用。这是我的代码：

$('$data-show').on('mouseover','span',function(){
    alert("Test");
});

<div id="show-data"></div>

这个问题有什么解决方案？非常感谢你。

最佳答案

使用#show-data而不是$data-show和click()事件而不是mouseover()事件。

$('#show-data').on('click','span',function(){
  alert($(this).text());
});

var count = 0;
$('button').on('click', function(){
  count = count+1;
  $('#show-data').append('<span>Test'+count+'</span>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="show-data">
    <span>Erprobung</span>
    <span>Probe</span>
    <span>Prüfung</span>
    <span>Test</span>
    </div>
    <button>Add Span</button>

关于javascript - 单击页面加载后添加的跨度元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49647260/