呼叫show.bs.modal事件父事件之前

Question

我有一個自舉按鈕（I使用自舉4）打開一個模式並傳輸數據，在按鈕在由函數模態形式：

$('#exampleModal').on('show.bs.modal', function (event)。

該按鈕位於div（父級）中。 當我點擊按鈕之前調用父項事件的孩子。 我不想讓父事件運行。 我只需要彈出模式即可打開。 當我嘗試打開按鈕時，先點擊它的呼叫，但數據不傳輸。 這是我的代碼示例：codepen

這是HTML

<div class="row"> 
    <div class="col-12 parent"> 
    I'm the parent! 
    <div class="child"> 
     I'm the child 
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"  data-whatever="@mdo" data-message="@test message" >Open modal </button> 

    </div> 
    </div> 
</div> 



<!-- Bootstrap Modal --> 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">New message</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <form> 
      <div class="form-group"> 
      <label for="recipient-name" class="form-control-label">Recipient:</label> 
      <input type="text" class="form-control" id="recipient-name"> 
      </div> 
      <div class="form-group"> 
      <label for="message-text" class="form-control-label">Message:</label> 
      <textarea class="form-control" id="message-text"></textarea> 
      </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Send message</button> 
     </div> 
    </div> 
    </div> 
</div> 

這是腳本

<script> 
$(".parent").click(function(event){ 
    alert("Parent event"); 
}) 


/* 
if I add this function I cant transfer the data that in the button 
$(".child").click(function(event){ 
    alert("Child event"); 
    event.stopPropagation(); 
    $('#exampleModal').modal('show'); 
})*/ 



$('#exampleModal').on('show.bs.modal', function (event) { 
    alert("btn event"); 
    var button = $(event.relatedTarget) // Button triggered the modal 
    var recipient = button.data('whatever') 
    var message = button.data('message') 
    var modal = $(this) 
    modal.find('.modal-title').text('New message to ' + recipient) 
    modal.find('.modal-body input').val(recipient) 
    modal.find('.modal-body textarea').val(message) 
}) 
</script> 

Answer 1

相當簡單，在父點擊，檢查target比不同button與data-target='#exampleModal'或沒有，所有使用.is() jQuery功能：

//get reference to the button 
var $button = $("button[data-target='#exampleModal']"); 
$(".parent").click(function(event){ 
    if (!$(event.target).is($button)) { // be sur button was'nt clicked 
    alert("Parent event"); 
    } 
}) 

Updated Pen

見工作片斷如下：

var $button = $("button[data-target='#exampleModal']"); 
 

 
$(".parent").click(function(event){ 
 
    if (!$(event.target).is($button)) { 
 
    alert("Parent event"); 
 
    } 
 
}) 
 

 

 

 
$('#exampleModal').on('show.bs.modal', function (event) { 
 
    alert("btn event"); 
 
    var button = $(event.relatedTarget) // Button triggered the modal 
 
    var recipient = button.data('whatever') 
 
    var message = button.data('message') 
 
    var modal = $(this) 
 
    modal.find('.modal-title').text('New message to ' + recipient) 
 
    modal.find('.modal-body input').val(recipient) 
 
    modal.find('.modal-body textarea').val(message) 
 
})

body { 
 
    background-color: #a3d5d3; 
 
} 
 

 
.col-12{ background:red; height:100px;} 
 
.child{background:white;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-12 parent"> 
 
    I'm the parent! 
 
    <div class="child"> 
 
     I'm the child 
 
     <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"  data-whatever="@mdo" data-message="@test message" >Open modal </button> 
 

 
    </div> 
 
    </div> 
 
</div> 
 

 

 

 
<!-- Bootstrap Modal --> 
 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <h5 class="modal-title" id="exampleModalLabel">New message</h5> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <form> 
 
      <div class="form-group"> 
 
      <label for="recipient-name" class="form-control-label">Recipient:</label> 
 
      <input type="text" class="form-control" id="recipient-name"> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label for="message-text" class="form-control-label">Message:</label> 
 
      <textarea class="form-control" id="message-text"></textarea> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Send message</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>