Вы немного неправильно используете метод wrapInner.
В документации написано - Тип: htmlString or Selector or jQuery or Element.
А вы отправляете строку 'span', которая является селектором, но элементов с таким селектором у вас нет.
htmlString
$("li").wrapInner("<span></span>");
$("span").on("click", function() {
alert($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Element
$("li").wrapInner(document.createElement('span'));
$("span").on("click", function() {
alert($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Selector
$("li").wrapInner('span');
$("span").on("click", function() {
alert($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span></span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
jQuery то же самое, что Element, но обернутое в jQuery