使用Twitter Bootstrap模式按钮时获取e.relatedTarget

Question

I have written the code to show a modal when a button is clicked, with the intention to edit button's text inside the modal.

My intention is to have a lot of buttons, so instead of getting them by id, I use e.relatedTarget when the modal is invoked in order to know which button has called and get the text from the button so I can show it at the modal.

But the problem comes when I edit the text at the modal and click the OK button. I don't know how to access the e.relatedTarget from there.

HTML:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Change this text</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                 <h4 class="modal-title" id="exampleModalLabel">New message</h4>

            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="text-to-edit" class="control-label">Edit text:</label>
                        <input type="text" class="form-control" id="text-to-edit">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

JS:

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var buttonText = button.text() // Get text
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-body input').val(buttonText)
});

// Modal ok button
$('#exampleModal .btn-primary').click(function() {
    // Get input text value
    var text = $('#exampleModal').find('.modal-body input').text();

    // Hide modal
    $('#exampleModal').modal('hide');

    // Set new text to the caller button
    // ?
});

JsFiddle: http://jsfiddle.net/nm4nmxsf/

Any help?

Answer 1

I added comments showing you what to change

// Set an empty variable for button outside of your function !important
var button = '';

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

    //don't redeclare your variable for button, instead update it
    button = $(event.relatedTarget) // Button that triggered the modal

    var buttonText = button.text() // Get text
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this);
    modal.find('.modal-body input').val(buttonText);
});

// Modal ok button
$('#exampleModal .btn-primary').click(function() {
    // Get input text value

    //use val() instead of text()
    var text = $('#exampleModal').find('.modal-body input').val();

    $('#exampleModal').modal('hide');

    // Set new text to the caller button
    // ?
    button.text(text);
});

See this fidde: http://jsfiddle.net/nm4nmxsf/4/

Answer 2

var button;

$('#exampleModal').on('show.bs.modal', function (event) {
    button = $(event.relatedTarget);
    var buttonText = button.text();
    var modal = $(this);
    modal.find('.modal-body input').val(buttonText);
});

$('#exampleModal .btn-primary').click(function() {
    var text = $('#exampleModal').find('.modal-body input').val();
    $('#exampleModal').modal('hide');
   button.text(text);
});

JSFIDDLE