Failed to get response from click range 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'm trying to achieve is that when a user clicks on any gap with the "icon-trash" class, I don’t want to trigger an onclick response.

I can handle which gap has been pressed, but now I am stuck in the click itself, since it is not I cannot receive a warning message in this example

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

Answer 1

Why doesn't it work?

click , . , , click .

, : -

1.if <span class='icon-trash'> , .

2. / CSS, click ( ).

: -

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

<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'> (Click me for trash)</span> </div>
    <div class='comment-row-id-2'> <span class='user'> smith </span> <span class='icon-trash'> (Click me for trash)</span> </div>
    <div class='comment-row-id-3'> <span class='user'> jane </span> <span class='icon-trash'> (Click me for trash)</span> </div>
</div>

Hide result

Answer 2

.icon-trash - /

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>

Hide result

Answer 3

:

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

, . , :

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

.

Answer 4

span , , , , . CSS, . :

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

Answer 5

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

}
</style>




<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

< →  

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

Answer 6

. . js

Answer 7

, :

. DOM .  , click() , , DOM. click() document.ready(), :

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

. , ; , , click() , :

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


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

: , click() . , icon-trash DOM ; .

Answer 8

, ,

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

.icon-trash img{cursor:pointer;}

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

<div class='container'>

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

</div>

Hide result

Answer 9

. jquery, .

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

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

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

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

Hide result

, .