繁体   English   中英

使跨度在可点击的行内可点击

[英]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">&times;</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body" style="height: 400px"> <p>One fine body&hellip;</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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM