单击事件在下拉菜单中无法正常工作以调用模型窗口

Question

我需要使用bootstrap4从下拉菜单中调用模型窗口

下面是我的代码

<div class="btn-group" role="group">
    <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown"><i class="fas fa-ellipsis-v"></i></button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#model_window" data-toggle="modal" data-target="#model_window"><i class="fas fa-plus-circle fa-fw"></i>Add New</a>
    </div>
</div>

<div class="modal fade" id="model_window" tabindex="-1" role="dialog" aria-labelledby="model_window" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>

这是我尝试的jquery，但无法正常工作

$(document).on('click','.dropdown-item[data-toggle="modal"]', function( e ) {
    e.stopPropagation();
    $($(this).data('target')).modal('show', $(this));
});

但是这种方式可以通话

$('.dropdown-item[data-toggle="modal"]').click(function(e) {
    e.stopPropagation();
    $($(this).data('target')).modal('show', $(this));
});

但是我需要像$(document).on('click','.dropdown-item[data-toggle="modal"]',这样使用，因为还有其他一些相关的代码