Question

我有以下html结构

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

我想要达到的目标是，当用户点击任何带有课程＆＃39; icon-trash＆＃39;我不想触发onclick响应。

我可以处理点击了哪个跨度，但现在我卡在了点击本身，因为它不能在此示例中获取警报消息

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

Answer 1

.icon-trash应包含某些内容，或者是block / 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>

Answer 2

为什么它不起作用？

对于任何元素<span class='icon-trash'>，只有在渲染后它将占用浏览器上的某些物理空间时才会起作用。如果元素没有加强，那么就不会占用空间，而母鸡CSS将无效。

请查看以下内容： -

1.如果click在您的浏览器上显示垃圾桶图标，则只有提醒才有效。

2.您可以通过$(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>无论如何都可以使用（包含或不包含任何内容）。

工作示例： -

    $.ajax({
            url:"cart2.php",
            type:"POST",
            data:'prod_id='+prod_id,
            success:function (data) {         
                alert("success");
                console.log(data);
            }

        });

{{1}}

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

(*)

＆GT; 和

./gradlew :app:dependencies

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()功能有效时，请确保这一点。如果在DOM 中没有 icon-trash元素时有效什么都没得到。

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>

Answer 9

检查一下。使用一些文本而不是空格并使用像这里使用的jquery代码。

＆＃13;

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

＆＃13;

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

＆＃13;

希望它有所帮助。

无法使用jQuery从点击范围获得响应

9 个答案: