无法从使用jQuery

点击跨度响应我有以下的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') 
})

来源

2017-04-27 tikimti-mvrht

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

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

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

为什么它不工作？

对于任何元素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>

来源

2017-04-27 11:59:03

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

来源

2017-04-27 11:56:23

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

$（'。Container'）。on（“keypress”，function（e）{ // //而不是使用span类使用div类 }）; –

问题就在这里：

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

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

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

并再试一次。

来源

2017-04-27 11:56:52

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

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

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

来源

2017-04-27 11:57:07 Leguest

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

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

来源

2017-04-27 11:57:39 mavili

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

来源

2017-04-27 11:58:51

有两件事情你应该考虑：

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

来源

2017-04-27 12:05:47

请立即检查，

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>

来源

2017-04-27 12:09:43

检查它。使用一些文字而不是空格，并使用这里使用的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>

希望它帮助。

来源

2017-04-27 12:10:32

无法从使用jQuery

回答

相关问题