I have the following html structure

<div class='container'>

    <div class='ment-row-id-1'> <span class='user'> job </span> <span class='icon-trash'> </span> </div>
    <div class='ment-row-id-2'> <span class='user'> smith </span> <span class='icon-trash'> </span> </div>
    <div class='ment-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')
})

I have the following html structure

<div class='container'>

    <div class='ment-row-id-1'> <span class='user'> job </span> <span class='icon-trash'> </span> </div>
    <div class='ment-row-id-2'> <span class='user'> smith </span> <span class='icon-trash'> </span> </div>
    <div class='ment-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')
})

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 27, 2017 at 12:50 Death-is-the-real-truth 72.3k1010 gold badges5757 silver badges104104 bronze badges asked Apr 27, 2017 at 11:50 tikimti-mvrhttikimti-mvrht 23022 silver badges1212 bronze badges 6

• 1 it's because <span class='icon-trash'> have nothing to display and hense not working – Death-is-the-real-truth Commented Apr 27, 2017 at 11:55
• @AlivetoDie it is a trash symbol, so it can only be empty. I use it to delete the row – tikimti-mvrht Commented Apr 27, 2017 at 11:57
• Its working jsfiddle/o2gxgz9r/6354 – Pawan Commented Apr 27, 2017 at 11:57
• 1 i am unable to see any trash icon there in your code – Death-is-the-real-truth Commented Apr 27, 2017 at 11:58
• You really needed to make the fact that the <span> elements aren't actually empty a little clearer to stop the obvious, red herring answers. – Tom Commented Apr 27, 2017 at 11:58

 |  Show 1 more ment

9 Answers 9

Sorted by: Reset to default 4

.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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class='container'>

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

</div>

Why it's not working?

For any element click will work only when it will occupied some physical space on browser after rendered. If element have no-conent then no space is occupied and hens click will not work.

So check below:-

1.if <span class='icon-trash'> showing trash icon on your browser then only alert will work.

2.You can provide some height/width through CSS so that click will work anyhow(with or without any content).

Working Example:-

$(document).ready(function(){
  $(".icon-trash").click(function(){
    alert('hi');
  })
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
    <div class='ment-row-id-1'> <span class='user'> job </span> <span class='icon-trash'> (Click me for trash)</span> </div>
    <div class='ment-row-id-2'> <span class='user'> smith </span> <span class='icon-trash'> (Click me for trash)</span> </div>
    <div class='ment-row-id-3'> <span class='user'> jane </span> <span class='icon-trash'> (Click me for trash)</span> </div>
</div>

Your span elements are empty, and therefore they probably wouldn't show in the browser to be easily clickable. I would add some CSS to make it visible. For example:

span.icon-trash {
    display: block
    height: 25px;
    width: 25px;
    border: 1px solid black; 3or just anything to make it visible
    cursor: pointer;
}

The issue is here:

<span class='icon-trash'> </span>

your span is blank that's why you are not able to click on that. Pass some value in it like:

<span class='icon-trash'>Hello</span>

and try again.

   <style>
.icon-trash {
   display: inline-block;
   width: 28px;
   height: 28px;
   background: #dfdfdf;
cursor:pointer;

}
</style>




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

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

    </div

> AND

<script>
JQuery(function($){
$('.icon-trash').click(function(e){
    alert('hi')
})
});
</script>

Why there is an empty span used. And use . User in js file

Please check now,

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

.icon-trash img{cursor:pointer;}

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<div class='container'>

    <div class='ment-row-id-1'> <span class='user'> job </span> <span class='icon-trash'><img src="https://maxcdn.icons8./Share/icon/Editing//delete1600.png" width=15 height=15 /></span> </div>
    <div class='ment-row-id-2'> <span class='user'> smith </span> <span class='icon-trash'><img src="https://maxcdn.icons8./Share/icon/Editing//delete1600.png" width=15 height=15 /></span> </div>
    <div class='ment-row-id-3'> <span class='user'> jane </span> <span class='icon-trash'><img src="https://maxcdn.icons8./Share/icon/Editing//delete1600.png" width=15 height=15 /></span> </div>

</div>

Check it. Use some text instead of space and use jquery code like used here.

$(document).ready(function() {
	jQuery(".icon-trash").click(function(){
		alert('hi');
	});
});

<!DOCTYPE html>
<html>
  <head>
	<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.0/jquery.min.js"></script>
	<script src="test.js"></script>
  </head>
  <body>
	<div class='container'>

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

	</div>
  </body>
</html>

Hope it helped.

There are 2 things you should consider:

First: Elements are loaded into DOM from up to end, one by one. So when you want to bind click() on an element, you should wait till that element is loaded into the DOM. Put click() in document.ready() for example:

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

Second: Since elements load from up to down like a waterfall; if you don't want to wait till the document is ready, you should put click() binding function after the elements, not before:

<span class='icon-trash'> </span>


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

Main Idea: Be sure of that when your click() function works. If it works when there are no icon-trash elements in the DOM yet; you get nothing.