document.ready（）にブートストラップ・モーダルのe.relatedTargetを取得する方法はありますか？

Question

同じモーダルを呼び出す2つのボタンがありますが、どのボタンがモーダルを呼び出すかを検出するためにdata-button属性を設定しました。

<button type="button" id="another" data-toggle="modal" data-target="#modal" class="btn btn-warning" data-button='another'>Add another</button> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal" data-button="lab">Add lab</button> 

私がしたいことは、ボタンの呼び出し側に応じてモーダル内のラベルを変更することです。予想通り、それはモーダルが示されているのみで、初めての作品

<script> 
$('#modal').on('show.bs.modal', function(e) { 
    var $trigger = $(e.relatedTarget); 
    $('#vv_type').val($trigger.data('button')); 
    v_type = $trigger.data('button'); 
    if (v_type == 'lab') { 
     $('#ModalLabel').html('changed label'); 
     $("label[for='id_date_of_label']").html('label inside modal changed'); 
    } 
}) 
</script> 

を、と私はボタンをクリックすると、同じ変更されたラベルが常に表示され、その後、これが原因$('#modal').on('show.bs.modal', function (e) {

にロジックです：私はそのようにしました

はv_type変数を宣言して、私はスクリプトが、私はモーダル呼び出しボタンをクリックするたびに実行されることを確認してくださいようdocument.ready()機能に送信する方法がある（だけではなく、最初の時間を？）

Answer 1

を。欠落している部分はif (v_type == 'lab') {のelseです。ボタンをクリックするたびにラベルの変更が表示されます。

$('#myModal').on('show.bs.modal', function (e) { 
 
\t var $trigger = $(e.relatedTarget); 
 
\t //$('#vv_type').val($trigger.data('button')); 
 
\t v_type = $trigger.data('button'); 
 
\t 
 
\t if (v_type == 'lab') { 
 
\t \t $('#buttonText').html(v_type); 
 
\t \t //$("label[for='id_date_of_label']").html('label inside modal changed'); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t $('#buttonText').html(v_type); 
 
\t \t //$("label[for='id_date_of_label']").html('label inside modal changed'); 
 
\t } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<button type="button" data-button="lab" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 
<button type="button" data-button="lab 123" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
<div id="myModal" class="modal fade" role="dialog"> 
 
\t <div class="modal-dialog"> 
 

 
\t \t <!-- Modal content--> 
 
\t \t <div class="modal-content"> 
 
\t \t \t <div class="modal-header"> 
 
\t \t \t \t <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
\t \t \t \t <h4 class="modal-title">Modal Header</h4> 
 
\t \t \t </div> 
 
\t \t \t <div class="modal-body"> 
 
\t \t \t \t <p id="buttonText"></p> 
 
\t \t \t </div> 
 
\t \t \t <div class="modal-footer"> 
 
\t \t \t \t <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 2

私は解決しましたこれは隠された入力からdata-buttonを得ることによってこれはモーダルで（私のモーダルはそれで既にフォームを持っている）、私は、モーダルが表示されるたびに実行され、このスクリプトを追加しました：あなたの元のコードはまだ私の作品

<script> 
    $(document).ready(function() { 
     $('.modal').on('show.bs.modal', function (e) { 
      if ($('#vv_type').val() == 'lab') { 
       $('#ModalLabel').html('changed label'); 
    $("label[for='id_date_of_label']").html('label inside modal changed'); 
      } 
      else { 
       $('#ModalLabel').html('origin label'); 
    $("label[for='id_date_of_label']").html('label inside modal origin'); 
      } 
     }); 
    }); 
</script>