动态创建的Boostrap模式缺少RelatedTarget属性

Question

我有一个动态构建的Bootstrap模式，它在服务器端生成，作为对AJAX调用的响应。问题是我在事件中看不到relatedTarget属性。请参阅以下代码：

HTML：

<i id = '#open_modal_test' class="fa fa-envelope open-modal" aria-hidden="true"
    title = 'Test' data-placement="right"
    data-toggle = "tooltip" data-target="#test_form" data-head="{% Test %}" data-caller-type = ...></i>

JS：

$(document).on('show.bs.modal', '#new_message_form', function (e) {
    e.preventDefault();
    var $button = $(e.relatedTarget); // relatedTarget is undefined here
    var caller_type = $button.data('caller-type');
    alert(caller_type);
});

Both `#open_modal_test` element and `#new_message_form` are created dynamically.

打开模态的代码如下：

$(document).on('click', '.open-modal', function(e) {
        var $triggered_elem = $(this);
        var modal_id = $triggered_elem.data('target');
        $(modal_id).on('show.bs.modal', function(e) {
            var head = $triggered_elem.data('head') // Extract info from data-* attributes
            var modal = $(this);
            modal.find('.modal-title').text(head);
        }).modal({backdrop:'static',keyboard:false});
    });

有谁知道这个问题的原因是什么？