jquery - 动态链接未触发 Twitter 模态

Question

我有一个搜索框，可以帮助用户在菜单中找到内容，并且它工作得非常好，除非链接是模态链接。不会触发模态事件，我一直不知道为什么会这样。这是搜索框代码:

    $('#txtSearch').on('keyup', function () {
        if ($(this).val() != "") {
            $('#menuSearchResults').html("");
            $("a.menuItem:contains('" + $(this).val() + "')").each(function () {
                if ($(this).data('toggle')) {
                    $('#menuSearchResults').append('<a href="#" data-toggle="modal" data-target="' + $(this).data('target') + '" id="' + $(this).prop('id') + '">' + $(this).text() + '</a><br>');
                } else {
                    $('#menuSearchResults').append('<a href="' + $(this).prop('href') + '">' + $(this).text() + '</a><br>');
                }
            });
        } else {
            $('#menuSearchResults').html("");
       }
    });

对我来说一切看起来都是正确的，所以我不知道为什么它不起作用。

编辑:

这是我针对相关按钮的点击事件

$('#mnuCreateReport').on('click', function (e) {
    e.preventDefault();

    buildFormDialog('dlgCreateReport', 'Create Custom Report', '/form/report/create');
});

Answer 1

问题似乎在于您在将元素添加到 DOM 之前绑定(bind)了 click 事件。您可以使用 jQuery 的事件委托(delegate)来解决该问题。所以代替:

$('#mnuCreateReport').on('click', function (e) {
    e.preventDefault();

    buildFormDialog('dlgCreateReport', 'Create Custom Report', '/form/report/create');
});

你会:

$('#menuSearchResults').on('click', '#mnuCreateReport', function(e){
    e.preventDefault();

    buildFormDialog('dlgCreateReport', 'Create Custom Report', '/form/report/create');
});

请参阅 jQuery 文档 here有关事件委托(delegate)如何工作的更多信息。干杯!