[英]Make span clickable inside a clickable row
我有以下代码:
$(".clickable").click(function() { window.location = $(this).data("target"); }); $(".clickableB").click(function() { alert('I got a click'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <thead> <tr> <th>Employee</th> <th>Total hours</th> <th>Comments</th> <th>Options</th> </tr> </thead> <tbody> <tr data-toggle="modal" data-target="#events-modal" class="clickable success"> <td>Pedro</td> <td>1</td> <td>This is a very loooooooooooooooooooong text</td> <td> <span style="color:green" class="clickableB fa fa-check-square"></span> <span style="color:orange" class="clickableB fa fa-warning"></span> <span style="color:red" class="clickableB fa fa-minus-square"></span> </td> </tr> </tbody> </table> <div class="modal fade" id="events-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body" style="height: 400px"> <p>One fine body…</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
然后,我想要获得的是在行中单击时显示模式,但在单击图标/跨度时收到警报。 每次我单击图标时,都会显示模态。
尝试这个。 您将其绑定到不是.noclick
每个td,然后使用.parent获取数据目标。
$(".clickable td:not(.noclick)").click(function() { console.log("modal click"); window.location = $(this).parent().data("target"); }); $(".clickableB").click(function() { alert('I got a click'); });
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <table class="table"> <thead> <tr> <th>Employee</th> <th>Total hours</th> <th>Comments</th> <th>Options</th> </tr> </thead> <tbody> <tr data-toggle="modal" data-target="#events-modal" class="clickable success"> <td>Pedro</td> <td>1</td> <td>This is a very loooooooooooooooooooong text</td> <td class="noclick"> <span style="color:green" class="clickableB fa fa-check-square"></span> <span style="color:orange" class="clickableB fa fa-warning"></span> <span style="color:red" class="clickableB fa fa-minus-square"></span> </td> </tr> </tbody> </table>
这是由于事件冒泡而发生的。 为了防止它,请使用stopPropagation
:
$(".clickable").click(function(evt) {
window.location = $(this).data("target");
});
$(".clickableB").click(function(evt) {
evt.stopPropagation()
alert('I got a click');
});
这样,当您单击一行时,它将打开模态,但是当单击跨度时,它只会在不打开模态的情况下发出警报
它可以帮助您:
$(".clickable").click(function(e) {
if($(e.target).hasClass("clickableB")) {
alert('I got a click');
}
else {
window.location = $(this).data("target");
}
});
干杯
clickableB
span类内没有数据,您需要添加一些文本或图像,然后它才能工作
$(".clickable").click(function() { window.location = $(this).data("target"); }); $(".clickableB").click(function() { alert('I got a click'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <thead> <tr> <th>Employee</th> <th>Total hours</th> <th>Comments</th> <th>Options</th> </tr> </thead> <tbody> <tr data-toggle="modal" data-target="#events-modal" class="clickable success"> <td>Pedro</td> <td>1</td> <td>This is a very loooooooooooooooooooong text</td> <td> <span style="color:green" class="clickableB fa fa-check-square">clickableB</span> <span style="color:orange" class="clickableB fa fa-warning">clickableB</span> <span style="color:red" class="clickableB fa fa-minus-square">clickableB</span> </td> </tr> </tbody> </table>
代替
<span style="color:green" class="clickableB fa fa-check-square"></span>
我只会用
<span onclick='functionOfChoice();' style="color:green"> ....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.