製作跨度可點擊

Question

我有以下代碼：

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

那麼，我想是顯示模式時，該行的點擊，但獲得的當我點擊圖標/跨度時警報。每次我點擊圖標時，都會顯示模式。

Answer 1

這是因爲事件冒泡的發生。爲了防止它使用stopPropagation：

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

這樣一來，當你點擊一個排它會打開模式，但點擊跨度時，它會在不打開他是用fontawesome模態

Answer 2

它可以幫助你：

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

乾杯

Answer 3

裏面有clickableB跨度類中沒有數據，您需要添加一些文字或圖像，然後它會工作

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

試試這個。您將它綁定到每個不是.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>

Answer 5

，而不是

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

我只想用

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