unable to get response from a click span using jQuery

Question

I have the following html structure

<div class='container'>

    <div class='comment-row-id-1'> <span class='user'> job </span> <span class='icon-trash'> </span> </div>
    <div class='comment-row-id-2'> <span class='user'> smith </span> <span class='icon-trash'> </span> </div>
    <div class='comment-row-id-3'> <span class='user'> jane </span> <span class='icon-trash'> </span> </div>

</div>

What I am trying to achieve is that when a user clicks on any of the span with class 'icon-trash' I wan't that to trigger onclick response.

I can handle which span was clicked, but now I am stuck at the click itself, as it does not I can not get the alert message in this example

jQuery(".icon-trash").click(function(){
    alert('hi')
})

Answer 1

.icon-trash should contain something, or be block/inline-block element

jQuery('.icon-trash').click(function(e){
    alert('hi')
})

.icon-trash {
   display: inline-block;
   width: 6px;
   height: 6px;
   background: #ccc;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class='container'>

    <div class='comment-row-id-1'> <span class='user'> job </span> <span class='icon-trash'> </span> </div>
    <div class='comment-row-id-2'> <span class='user'> smith </span> <span class='icon-trash'> </span> </div>
    <div class='comment-row-id-3'> <span class='user'> jane </span> <span class='icon-trash'> </span> </div>

</div>