2017-04-27 100 views
4

点击跨度响应我有以下的HTML结构无法从使用jQuery

<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> 

我想实现的是,当用户点击任何带班“图标垃圾”的跨度我不想触发onclick回应。

我可以处理单击的跨度,但现在我停留在点击本身,因为它不是我不能在这个例子中得到警报消息

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

这是因为''没有任何东西可以显示,而且不起作用 –

+0

@AlivetoDie它是垃圾标志,所以它只能是空的。我用它来删除该行 –

+0

其工作https://jsfiddle.net/o2gxgz9r/6354/ – Pawan

回答

3

为什么它不工作?

对于任何元素click只有在渲染后在浏览器上占用一些物理空间时才起作用。如果元素没有内容,则不占用空间,母鸡click将不起作用。

所以下面检查: -

1.如果<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>

1

为什么有使用空跨度。并使用。用户在js文件

+0

@AlivetoDie它是一个垃圾标志,所以它只能是空的。我用它来删除行 –

+0

$('。Container')。on(“keypress”,function(e){ // //而不是使用span类使用div类 }); –

2

问题就在这里:

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

您的跨度是空白的,这就是为什么你不能点击那个。通过它的一些价值,如:

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

并再试一次。

+0

向下选民有什么具体原因? –

+0

我没有DV。但跨度不能包含,它是一个图标 –

4

.icon-trash应包含的东西,或者是块/ inline-block的元素

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>

2

span元素是空的,所以他们可能不会在浏览器中显示是容易点击。我会添加一些CSS使其可见。例如:

span.icon-trash { 
    display: block 
    height: 25px; 
    width: 25px; 
    border: 1px solid black; 3or just anything to make it visible 
    cursor: pointer; 
} 
2
<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> 
1

有两件事情你应该考虑:

首先:元素被加载到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中的元素尚未;你什么都得不到。

1

请立即检查,

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>

1

检查它。使用一些文字而不是空格,并使用这里使用的jQuery代码。

$(document).ready(function() { 
 
\t jQuery(".icon-trash").click(function(){ 
 
\t \t alert('hi'); 
 
\t }); 
 
});
<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
\t <script src="test.js"></script> 
 
    </head> 
 
    <body> 
 
\t <div class='container'> 
 

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

 
\t </div> 
 
    </body> 
 
</html>

希望它帮助。