有没有办法在document.ready（）中获取引导程序模式的e.relatedTarget？

Question

I have two buttons that invoke the same modal, I have set data-button attribute to detect which button invoked the modal.

<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>

what I wanted to do is to change a label inside a modal depending on the button invoker. I did so :

<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>

it works as expected only the first time when modal is shown , and after that the same changed label is always displayed whenever I click on the buttons, and this is logic due to $('#modal').on('show.bs.modal', function (e) {

Is there a way to declare v_type variable and send it to document.ready() function so that I make sure that the script will run every time I click on buttons invoking the modal (not only the first time?)

Answer 1

I have solved this by getting the data-button from a hidden input vv_type on the modal (my modal has already a form in it ) and I added this script which is ran each time a modal is shown:

 <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>

Answer 2

Your original code still works for me. The only part missing is the else condition for if (v_type == 'lab') { . I can see the label change on each button click.

 $('#myModal').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') { $('#buttonText').html(v_type); //$("label[for='id_date_of_label']").html('label inside modal changed'); } else { $('#buttonText').html(v_type); //$("label[for='id_date_of_label']").html('label inside modal changed'); } }) 

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