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

Question

I have the following code:

 $(".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 --> 

Then, what I want to get is to show a modal when a click in the row but get an alert when I click on the icons/spans. Everytime I click in the icons, the modal shows up.

Answer 1

Try this. You bind it to every td that isnt a .noclick and use .parent to get the data target.

 $(".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> 

Answer 2

This is happening because of event bubbling. To prevent it use stopPropagation :

$(".clickable").click(function(evt) {
  window.location = $(this).data("target");
});
$(".clickableB").click(function(evt) {
  evt.stopPropagation()
  alert('I got a click');
});

That way, when you click a row it will open the modal, but when clicking the span, it will only alert without opening the modal

Answer 3

it could help you:

$(".clickable").click(function(e) {
    if($(e.target).hasClass("clickableB")) {
        alert('I got a click');
    }
    else {
        window.location = $(this).data("target");
    }
});

Cheers

Answer 4

There is no data inside clickableB span class, you need to add some text or image then it will be work

 $(".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> 

Answer 5

instead of

<span style="color:green" class="clickableB fa fa-check-square"></span>

i would just use

<span onclick='functionOfChoice();' style="color:green"> ....