Update bootstrap modal title on closing and reopening

Question

I have a bootstrap modal that is toggled with this element;

<i id="modal" data-toggle="modal" data-title="Title1" data-target="#Modal"></i><span>Open modal</span>

When modal is shown the title is set;

$('#Modal').on("show.bs.modal", function (e) {
// set title of modal
$("#ModalLabel").html($(e.relatedTarget).data('title'));
});

After this I edit the title like this;

$("#modal").attr('data-title', "Title2");

The data-title attribute of element is now "Title2" but when closing and reopen the modal the title is unchanged.

How to make jquery refresh the modal title?

Answer 1

When I was editing the title I was only changing the attribute in html. To change the value we need to specify .data for it to update correctly.

$("#modal").data('data-title', "Title2");